1. 이벤트 커미션은 무엇입니까? 평신도의 용어에서, 이벤트는 on 클릭, onmouseover, onmouseout 등입니다. 대표단에 관해서는, 그들은 그것을 요구받습니다. 이 이벤트는 원래 특정 요소에 추가되었지만 이벤트를 완료하기 위해 다른 요소에 추가했습니다.
즉, 거품의 원리를 사용하여 부모에게 이벤트를 추가하여 실행 효과를 트리거합니다.
혜택 : 1. 성능 향상.
우리는 예를 살펴볼 수 있습니다. 각 LI는 배경색을 바꾸려면 트리거되어야합니다.
<ul id = "ul"> <li> aaaaaaaaa </li> <li> bbbbbbbb </li> <li> ccccccccccc </li> </ul> window.onload = function () {var oul = document.getElementById ( "ul"); var ali = oul.geteMements ( "li ="; i <ali.length; i ++) {ali [i] .onmouseover = function () {this.style.background = "red";} ali [i] .onmouseout = function () {this.style.background = ";}}}이런 식으로 Li에서 마우스 이벤트를 추가 할 수 있습니다.
그러나 루프에 대한 많은 사람들이 있다면 성능에 영향을 미칩니다.
아래에서는 이벤트 대표단을 사용 하여이 효과를 달성 할 수 있습니다. HTML은 변경되지 않았습니다
window.onload = function () {var oul = document.getElementById ( "ul"); var ali = oul.getElementsByTagName ( "li");/*이벤트 소스는 여기에서 사용해야합니다. 이벤트 객체, 이벤트 소스. 어떤 이벤트에 있든, 당신이 작동하는 요소가 이벤트 소스 인 한. IE : Window.event.srcelement 표준 : event.targetNodeName : 요소의 레이블 이름을 찾으십시오 */oul.onmouseover = function (ev) {var ev = ev || Window.Event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "red";}} oul.onmouseout = function (ev) {var ev = ev || Window.Event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "";}}}혜택 2, 새로 추가 된 요소에는 이전 이벤트도 있습니다.
우리는 또한이 예를 들지만 Li를 동적으로 추가해야합니다. Li를 동적으로 추가하려면 버튼을 클릭하십시오
좋다:
<입력 유형 = "button"id = "btn"/> <ul id = "ul"> <li> aaaaaaa </li> <li> bbbbbbbb </li> <li> ccccccccc </li> </ul>
우리는 이벤트 커미션없이 다음을 수행 할 것입니다.
window.onload = function () {var oul = document.getElementById ( "ul"); var ali = oul.getElementsByTagName ( "li"); var obtn = document.getElementById ( "btn"); var inow = 4; for (var i = 0; i <ali.length; i ++) {this [i]. = "red";} ali [i] .onmouseout = function () {this.style.background = "";}} obtn.onclick = function () {inow ++; var oli = document.createElement ( "li"); oli.innerhtml = 1111 *inow; ol.appendchild (oli);}}}}}.이렇게하면 마우스 움직이는 이벤트가없는 Li의 새로 추가 된 Li 버튼을 클릭하여 배경색을 변경하는 것을 알 수 있습니다.
추가하려면 클릭 할 때 FER 루프가 실행 되었기 때문입니다.
그런 다음 이벤트를 위임하여 수행합니다. HTML은 변경되지 않은 상태입니다
window.onload = function () {var oul = document.getElementById ( "ul"); var ali = oul.getElementsByTagName ( "li"); var obtn = document.getElementById ( "btn"); var inow = 4; oul.onmouseOver = function (ev) {var ev = ev || Window.Event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "red";}} oul.onmouseout = function (ev) {var ev = ev || Window.Event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "";}} obtn.onclick = function () {inow ++; var oli = document.createelement ( "li"); oli.inhtml = 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111까지 *inow; oul.appendchild (oli);}}좋아요:
Weibo 게시물에서와 마찬가지로 새로운 Weibo 게시물에는 여전히 이전 마우스 이벤트가 있습니다.
위는 편집자가 소개 한 JavaScript의 이벤트의 시운전 및 이점입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!