JS性能优化之事件委托

2018-09-01 05:49:19来源：博客园阅读 ()

面试中2次被问到过这个知识点，实际开发中，应用事件委托也比较常见。JS中事件委托的实现主要依赖于事件冒泡。那什么是事件冒泡？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

为什么要用事件委托呢？一是为了图方便，二是为了提升性能。具体我们来举个例子看下：

HTML结构代码

<ul id="box">
   <li>demo</li>
   <li>demo</li>
   <li>demo</li>
   <li>demo</li>
        ...
   <li>demo</li>
   <li>demo</li>
   <li>demo</li>
</ul>

我们现在要给 ul 下的 li 添加点击事件。如果你不知道或不会运用事件委托，你的代码可能是下面这样的：

var box = document.getElementById('box'),
    lis = box.getElementsByTagName('li');

for (var i = lis.length - 1; i >= 0; i--) {
    lis[i].onclick = function() {}
}

上面代码很简单，逻辑清晰。我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li。我们再来看下应用事件委托后的代码：

var box = document.getElementById('box');
box.onclick = function() { }

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

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

var box = document.getElementById("box");
box.onclick = function(ev) {
　　var ev = ev || window.event;
　　var target = ev.target || ev.srcElement;
　　if(target.nodeName.toLowerCase() === 'li'){
　 　　　　　　    
　　}
}

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

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

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

常规思路代码：

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操作，如果用事件委托，能进行优化吗？

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 type="button" name="" id="btn" value="添加" />
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

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

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;i++){
    aLi[i].onmouseover = function(){
        this.style.background = 'red';
    };
    aLi[i].onmouseout = function(){
        this.style.background = '#fff';
    }
 }
 //添加新节点
 oBtn.onclick = function(){
    num++;
    var oLi = document.createElement('li');
    oLi.innerHTML = 111*num;
    oUl.appendChild(oLi);
  };

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

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;i++){
        aLi[i].onmouseover = function(){
            this.style.background = 'red';
        };
        aLi[i].onmouseout = function(){
            this.style.background = '#fff';
        }
     }
}
mHover ();
//添加新节点
oBtn.onclick = function(){
    num++;
    var oLi = document.createElement('li');
    oLi.innerHTML = 111*num;
    oUl.appendChild(oLi);
    mHover ();
};

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

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操作，这才是事件委托的精髓所在。

现在给一个场景 ul > li > div > p，div占满li，p占满div，还是给ul绑定时间，需要判断点击的是不是li（假设li里面的结构是不固定的），那么e.target就可能是p，也有可能是div，这种情况你会怎么处理呢？

那我们现在就再现一下这个场景：

<ul id="test">
    <li>
       <p>11111111111</p>
    </li>
    <li>
        <div>22222222</div>
    </li>
    <li>
        <span>3333333333</span>
    </li>
    <li>4444444</li>
</ul>

如上列表，有4个li，里面的内容各不相同，点击li，event对象肯定是当前点击的对象，怎么指定到li上，下面我直接给解决方案：

var oUl = document.getElementById('test');
oUl.addEventListener('click',function(ev){
    var target = ev.target;
    while(target !== oUl ){
        if(target.tagName.toLowerCase() == 'li'){
             console.log('li click~');
             break;
        }
        target = target.parentNode;
    }
})