BWmelon

js事件委托/事件代理
事件委托事件委托就是利用事件冒泡,将自身的事件添加到父级元素上再进行事件的触发。例子有这样一个列表,原来元素背景是...
扫描右侧二维码阅读全文
02
2019/03

js事件委托/事件代理

事件委托

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

例子

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

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

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

Last modification:March 2nd, 2019 at 03:53 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment