事件委托

事件委托就是利用事件冒泡，将自身的事件添加到父级元素上再进行事件的触发。

例子

有这样一个列表，原来元素背景是红色，用鼠标点击后元素变为绿色：

<ul>
    <li>变色1</li>
    <li>变色2</li>
    <li>变色3</li>
    <li>变色4</li>
    <li>变色5</li>
</ul>

1.png
一般我们有写法是先选中li标签，然后用for循环给标签添加一个点击事件，即：

var oli = document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
    oli[i].onclick = function() {
        this.style.background = '#0f0';
    }
}

这样做虽然能达到预期的效果，但是会有两个问题：
第一，如果标签数量非常多，有几百几千个，这样给标签添加点击事件时就会非常耗时，影响网页加载速度。
第二，如果标签是后来添加上去的（这在表格中很常见），新的标签就没有点击事件。
这时，用事件委托就很容易解决上面的问题。

使用方法

首先利用冒泡将li的点击事件传给父级元素ul，再获取ul当前电机的子元素标签。获取方式：
标准w3c方式：event.targt
反人类IE方式：window.event.srcElement
这样我们的代码就变成：

var oul = document.getElementsByTagName('ul')[0];
oul.onclick = function(ev) {        
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement; 
    target.style.background = '#0f0';
}

这时点击li标签，li的颜色就会放生改变。但是，如果我们不小心点到了li之间的空白，我们会发现整个ul列表颜色都发生了改变，这是因为我们点到了ul区域。所以，我们要加一个判断阻止这种情况的发生。改进后的代码：

var oul = document.getElementsByTagName('ul')[0];
oul.onclick = function(ev) {        
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement; 
    if(target.nodeName.toLowerCase() == 'li'){
        //转小写是因为target.nodeName获取到的是大写LI
        target.style.background = '#0f0';
    }
}

这样，一个简单的事件委托例子就写好了。

最后修改：2019 年 03 月 02 日 03 : 53 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏