Javascript内存和性能之事件委托

目录

定义：

原理：

使用场景：

实现：

适用事件委托的事件有：

---

定义：

对事件处理程序过多问题的解决档案就是事件委托。

每当将事件处理程序制定给元素时，运行中的浏览器代码与支持页面交互的JS代码之间就会建立一个连接，而 这种连接越多，页面执行起来就越慢。考虑内存和性能问题，为了解决事件处理程序过多的问题，采用事件委托变 得很有必要。（考虑到内存，也应该尽量减少不必要的事件处理程序，对于内存中过时不用的’空事件处理程序’， 也是很有必要将其移除的；）

---

原理：

利用事件冒泡，只指定一个事件处理程序，就可以管理某一相同类型的事件。

因为冒泡机制，比如既然点击子元素，也会触发父元素的点击事件，那我们完全可以将子元素的事件要做的事 写到父元素的事件里，也就是将子元素的事件处理程序写到父元素的事件处理程序中，这就是事件委托；利用事件 委托，只指定一个事件处理程序，就可以管理某一个类型的所有事件；

---

使用场景：

1）将多个子元素的事件委托给父元素完成（基于性能优化的考虑）

2）在动态加进来元素上绑定事件

 

实现：

需求：是列表中的每一个li标签变色并加文字

html代码：

<ul id="ull">
        <li>li001</li>
        <li>li002</li>
        <li>li003</li>
        <li>li004</li>
    </ul>

我们常规可能会这样做：

 var ul = document.getElementById("ull");
    var ali = ul.getElementsByTagName('li');
    for(var i=0;i<ali.length;i++){
        ali[i].onclick = function(){
            this.style.color='red';
            this.innerHTML += 'bbb';
        }
    }

首先找到ul，然后遍历li，点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

 

接下来我们使用事件委托的方式操作：

 ul.addEventListener('click', function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        target.innerHTML += 'bbb';
        target.style.color = 'yellow';
    }, false);

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，前两行为处理IE8以下版本的兼容处理

 

适用事件委托的事件有：

适用的：click、mousedown、mouseup、keydown、keyup、keypress。

需注意：mouseover、mouseout也支持事件冒泡，但是其太过灵活，需要时刻计算元素位置，不宜处理