JS性能优化之事件委托

时间 2019-12-14

原文原文链接

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

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

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。咱们再来看下应用事件委托后的代码：app

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

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

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>

常规思路代码：this

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;
    }
})

核心代码是while循环部分，实际上就是一个递归调用，你也能够写成一个函数，用递归的方法来调用，同时用到冒泡的原理，从里往外冒泡，知道currentTarget为止，当当前的target是li的时候，就能够执行对应的事件了，而后终止循环，恩，没毛病！这里看不到效果，你们能够复制过去运行一下！

转载自： https://www.cnblogs.com/liugang-vip/p/5616484.html

JS性能优化 之 事件委托

JS性能优化之事件委托