事件委托 - 简书

事件委托，其实之前有用过，但是就是百度了一下，并不了解它的优点到低好在哪里。今天突发奇想就了解了一下。
那下来总结一下吧。

什么是事件委托？
事件委托，也叫事件代理。利用了事件冒泡，可以用一个事件处理方法，管理处理一类事件。
事件委托的好处？
比如我们要给所有的li设置相同的onclick事件，首先想到的就是用for循环遍历了吧，但是每一次遍历就会进行一次dom操作。而添加到页面上的事件数量将直接关系到页面的整体运行性能，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间。所以事件委托的好处就在于大大减少了dom操作的次数，提高性能。
事件委托原理
利用事件冒泡原理，就是从事件最深的节点开始，逐步向上传播事件。
eg: div > ul > li > a 想要给a加一个点击事件时，它的执行顺序就是
a> li >ul > div,给里面的元素 a,li,ul添加事件时，最后都会冒泡到最外层的div上，所以都会触发，委托它们的父级代替它们执行。
事件委托怎么写？
Event对象提供了一个属性叫target，可以返回事件的目标节点，称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，所以还要用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写（toLowerCase（））再做比较
兼容性写法:

function (event) {
            let ev = event || window.event;
            let target = ev.target || ev.srcElement;
}

下面看例子吧：

<ul id="ul">
     <li>111</li>
     <li>222</li>
     <li>333</li>
     <li>444</li>
 </ul>

要给上述的每个li一个点击事件，显示字符串123。

基础方法：需要遍历这个li的对象集合，然后给每个li绑定点击事件

    window.onload = function(){
        const ul= document.getElementById("ul");
        const li = ul.getElementsByTagName('li');
        for(let i=0; i<aLi.length; i++){
            li[i].onclick = function(){
                console.log(123);
            }
        }
    }

父级ul做事件处理，触发点击事件（但不是点击每个结点触发的事件）

 window.onload = function () {
        const  ul = document.getElementById("ul");
        ul.onclick = function () {
            alert("1234");
        }
    }

事件委托，给父级绑定事件，但当点击每个结点时才触发事件

  window.onload = function () {
        const  ul = document.getElementById("ul");
        ul.onclick = function (event) {
            let target = event.target;
            if(target.nodeName.toLowerCase() === 'li'){
                console.log("1234");
                console.log(target.innerHTML);
            }
        }
    }

上面的例子应该很清晰的可以看出事件委托的优点了，减少了遍历和dom操作的次数。

对于不同的dom操作如何用事件委托呢？下面再来看个例子，更加深的体会一下吧。

   <div id="box">
       <input type="button" value="添加" id="add">
       <input type="button" value="删除" id="remove">
       <input type="button" value="选择" id="chose">
       <input type="button" value="移动" id="move">
   </div>

要实现点击对应的按钮，显示他要执行的操作。

基本方法: 给每个按钮都绑定相应的点击事件

            var add = document.getElementById("add");
            var remove = document.getElementById("remove");
            var move = document.getElementById("move");
            var chose = document.getElementById("chose");
            add.onclick = function(){
                alert('添加');
            };
            remove.onclick = function(){
                alert('删除');
            };
            move.onclick = function(){
                alert('移动');
            };
            chose.onclick = function(){
                alert('选择');
            }
        }

事件委托:给父级元素绑定点击事件，点击不同的按钮，通过选择，触发事件

  window.onload = function () {
       const  box = document.getElementById("box");
       box.onclick = function (event) {
           let target = event.target;
           switch (target.id.toLowerCase()) {
               case 'add':
                   console.log('添加');
                   break;
               case 'remove':
                   console.log('删除');
                   break;
               case 'chose':
                   console.log('选择');
                   break;
               case 'move':
                   console.log("移动");
                   break;
           }
       }
    }

通过这个例子就更清晰的看出事件委托，减少了绑定事件的dom操作。

emmm..下面这个例子就是创建新节点，并给新节点绑定相同的事件

   <input type="button" value="添加" id="add">
   <ul id="ul">
       <li>111</li>
       <li>222</li>
       <li>333</li>
       <li>444</li>
   </ul>

要求鼠标放上去为红色，离开为黄色，添加新节点，也要有这些事件

基本方法：对每一个li标签进行遍历操作，注意要想新节点要有这些事件，得将原有的事件封装成一个方法，创建新节点后，调用此方法。

    window.onload = function () {
        const ul = document.getElementById("ul");
        const li = document.getElementsByTagName('li');
        const btn = document.getElementById("add");
        function addNew() {
            for(let i = 0;i<li.length;i++){
                li[i].onmouseover = function () {
                    this.style.backgroundColor = 'red';
                };
                li[i].onmouseout = function () {
                    this.style.backgroundColor ='yellow';
                }
            }
        }
        btn.onclick = function () {
            let one = document.createElement('li');
            one.innerText = '555';
            ul.appendChild(one);
            addNew();
        };
    }

事件委托：给父元素绑定事件，点击子元素触发事件，新产生的节点，也可以拥有相同的事件，不需要别的操作

window.onload = function () {
        const ul = document.getElementById("ul");
        const li = document.getElementsByTagName('li');
        const btn = document.getElementById("add");
        ul.onmouseover = function (event) {
            let target = event.target;
            if(target.nodeName.toLowerCase() === 'li')
                target.style.backgroundColor = 'red';
        };
        ul.onmouseout= function (event) {
            let target = event.target
            if(target.nodeName.toLowerCase() === 'li')
                target.style.backgroundColor = 'yellow';
        };

        btn.onclick = function () {
            let one = document.createElement('li');
            one.innerText = '555';
            ul.appendChild(one);
        };
    };

写了这么多例子，应该很清晰了。

事件委托其实并不是所有的事件都适合用。
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
但是其中mouseover和mouseout都有位置计算问题，所以也不建议使用。

可以参考：js事件委托或事件代理详解