자바스크립트 이벤트 위임에 대한 자세한 설명

원인:

1. 이것은 프론트엔드 인터뷰의 전형적인 질문 유형입니다. 직장 동료에게 물어보는 것도 도움이 됩니다.

2. 이 글은 단지 준비를 위해 작성되었습니다. 두 번째는 이를 알고 있지만 이유를 모르는 다른 친구들을 위해 참고 자료를 제공하는 것입니다.

개요:

그렇다면 이벤트 위임이 무엇인가요? 또한 고급 JavaScript 프로그래밍 측면에서 이벤트 프록시라는 이름이 있습니다. 이벤트 위임은 이벤트 버블링을 사용하여 하나의 이벤트 핸들러만 지정하여 특정 유형의 모든 이벤트를 관리합니다. 그렇다면 이것은 무엇을 의미합니까? 인터넷 전문가들은 이벤트 위임에 대해 이야기할 때 기본적으로 같은 예를 사용하는데, 이는 이 현상을 설명하기 위해 속달을 사용하는 것입니다. 나는 그것에 대해 신중하게 생각했고 이 예가 정말 적절하다는 것을 알았습니다. 설명할 다른 예는 생각하지 않겠습니다. 부처님께 바칠 꽃을 골라 보겠습니다. 행사 위임의 원칙을 자세히 살펴보겠습니다.

월요일에는 동료 3명이 특급 배송을 받을 예정입니다. 속달 서명에는 두 가지 방법이 있습니다. 하나는 회사 문 앞에서 세 사람이 속달 배달을 기다리게 하는 것이고, 다른 하나는 접수원에게 귀하를 대신하여 서명하도록 맡기는 것입니다. 실제로 우리는 주로 위탁 솔루션을 사용합니다(회사는 문 앞에 서서 빠른 배송을 기다리는 직원이 너무 많은 것을 용납하지 않습니다). 프론트 데스크 직원은 속달 배송을 받은 후 수령인이 누구인지 확인한 다음 수령인의 요구 사항에 따라 서명하고 대신 비용을 지불합니다. 이 솔루션의 또 다른 장점은 신입사원이 회사에 오더라도 (수에 관계없이) 프론트 데스크 MM이 택배를 받은 후 확인하고 서명한다는 것입니다.

여기에는 실제로 두 가지 수준의 의미가 있습니다.

첫째, 이제 프론트 데스크의 동료가 서명할 수 있습니다. 즉, 프로그램의 기존 돔 노드에 이벤트가 있습니다.

두 번째, 신입 직원도 서명할 수 있습니다. . 프론트 데스크 MM이 서명한 것입니다. 즉, 프로그램에 새로 추가된 dom 노드에도 이벤트가 있습니다.

이벤트 위임을 사용하는 이유:

일반적으로 DOM에는 이벤트 핸들러가 있어야 하며 이에 대한 이벤트 핸들러를 직접 설정하면 됩니다. 하지만 이벤트 핸들러를 추가해야 하는 DOM이 많으면 어떻게 될까요? 예를 들어, 100개의 li가 있고 각 li에 동일한 클릭 이벤트가 있을 수 있습니다. for 루프 방법을 사용하여 모든 li를 탐색한 다음 여기에 이벤트를 추가할 수 있습니다.

JavaScript에서 페이지에 추가된 이벤트 핸들러의 수는 DOM 노드와 지속적으로 상호 작용해야 하기 때문에 페이지의 전체 실행 성능과 직접적인 관련이 있습니다. 브라우저에서 다시 그리거나 리플로우할 경우 전체 페이지의 대화형 준비 시간이 길어집니다. 따라서 성능 최적화의 주요 아이디어 중 하나는 이벤트 위임을 사용하려는 경우 DOM 작업을 줄이는 것입니다. 내부에서 DOM과의 작업은 한 번만 상호작용하면 되므로 DOM과의 상호작용 횟수가 크게 줄어들고 성능이 향상될 수 있습니다.

각 함수는 객체이며 객체는 메모리를 차지합니다. .객체가 많을수록 더 많은 메모리를 차지하게 되고, 자연적인 성능이 저하됩니다(메모리가 부족한 것은 흠입니다. 하하). 1,000 또는 10,000이면 하하만 가능합니다. 이벤트 위임을 사용하면 해당 부모 개체에서만 작업할 수 있습니다(부모가 하나만 있는 경우). 이런 식으로 메모리 공간이 하나만 필요하므로 당연히 성능이 좋아질 것입니다.

이벤트 위임의 원리:

이벤트 위임은 이벤트의 버블링 원리를 사용하여 구현됩니다. 즉, 이벤트는 가장 깊은 노드부터 시작하여 점차적으로 위쪽으로 전파됩니다. 예를 들어 페이지에 div>ul>li>a와 같은 노드 트리가 있습니다. 가장 안쪽에 있는 a이면 이 이벤트가 레이어별로 실행됩니다. 실행 순서는 a>li>ul>div입니다. 그런 다음 가장 바깥쪽 div에 클릭 이벤트를 추가합니다. , li 및 내부 클릭 이벤트는 가장 바깥쪽 div까지 버블링되므로 트리거됩니다. 이는 부모를 대신하여 이벤트를 실행하도록 위임하는 이벤트 위임입니다.

이벤트 위임 구현 방법:

마지막으로 이 기사의 핵심 부분에 도달했습니다. 하하. 이벤트 위임 방법을 소개하기 전에 일반적인 방법의 예를 살펴보겠습니다.

하위 노드는 동일한 것을 구현합니다. function:

    
• 111
    
• 222
    
• 333
    
• 444

함수를 구현하려면 li를 클릭하면 123이 뜹니다.

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<ali.length><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/22e3a06a99eaee066d9e0282007809c3-1.gif" class="lazy" alt="자바스크립트 이벤트 위임에 대한 자세한 설명"></span></div></ali.length>

위 코드의 의미는 매우 간단하다고 생각합니다. 이런 식으로 구현했습니다. DOM이 몇 개인지 살펴보겠습니다. 작동하려면 먼저 ul을 찾은 다음 li를 탐색하고 li를 클릭한 후 다시 대상 li의 위치를 ​​찾아야 최종 작업을 수행할 수 있습니다. 클릭할 때마다 li을 하나씩 찾아야 합니다.

그러면 이벤트 위임을 사용합니다. 이렇게 하면 어떻게 될까요?

rreee

 

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发，不怕，我们有绝招：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

 

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！

 

上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

<div>
        <input>
        <input>
        <input>
        <input>
    </div>

window.onload = function(){
            var Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");
            
            Add.onclick = function(){
                alert('添加');
            };
            Remove.onclick = function(){
                alert('删除');
            };
            Move.onclick = function(){
                alert('移动');
            };
            Select.onclick = function(){
                alert('选择');
            }
            
        }

 

上面实现的效果我就不多说了，很简单，4个按钮，点击每一个做不同的操作，那么至少需要4次dom操作，如果用事件委托，能进行优化吗？

window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'input'){
                    switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }
            
        }

 

用事件委托就可以只用一次dom操作就能完成所有的效果，比上面的性能肯定是要好一些的 

 

 现在讲的都是document加载完成的现有dom节点下的操作，那么如果是新增的节点，新增的节点会有事件吗？也就是说，一个新员工来了，他能收到快递吗？

看一下正常的添加节点的方法：

<input>
    

        
• 111
        
• 222
        
• 333
        
• 444
    

 

现在是移入li，li变红，移出li，li变白，这么一个效果，然后点击按钮，可以向ul中添加一个li子节点

 

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //鼠标移入变红，移出变白
            for(var i=0; i<ali.length><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8e05a80ecdb75cfe19baae0423d6c017-11.gif" class="lazy" alt="자바스크립트 이벤트 위임에 대한 자세한 설명"></span></div></ali.length>

 

这是一般的做法，但是你会发现，新增的li是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？一般的解决方案会是这样，将for循环用一个函数包起来，命名为mHover，如下：

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            function mHover () {
                //鼠标移入变红，移出变白
                for(var i=0; i<ali.length><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8e05a80ecdb75cfe19baae0423d6c017-13.gif" class="lazy" alt="자바스크립트 이벤트 위임에 대한 자세한 설명"></span></div></ali.length>

 

虽然功能实现了，看着还挺好，但实际上无疑是又增加了一个dom操作，在优化性能方面是不可取的，那么有事件委托的方式，能做到优化吗？

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //事件委托，添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }
                
            };
            
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

 

看，上面是用事件委托的方式，新添加的子元素是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。

 

--------------------------------------------------华丽的分割线-------------- -----------------------------------------------------------------------------------------------------

在这里先感谢一下@苍茫大地NV 的提问，提的问题非常好！

위 내용은 자바스크립트 이벤트 위임에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!