JavaScript事件委托

该文章由 leevare 发布于 ,归类于 Javascript

事件委托又叫做事件代理,它是利用事件冒泡,你只需要指定一个事件处理程序,就可以管理某一个类型的所有事件。

以click事件为例,如果需要为一个ul列表中的所有li元素绑定事件,那么传统的做法是遍历这个列表,然后再逐个添加click事件。那么如果列表非常多呢,就会非常影响性能,如果li列表中存在动态加入的内容,那么这段新加入的元素将会绑定不上click事件。

那么,如果使用事件委托呢,在父元素上添加一个click事件即可,然后再在内部点击元素的时候,事件将会向外部冒泡,那么就可以监听到内部列表的点击事件了。同时,在列表中追加新的内容,依然能监听到事件点击。

例如一个表格,点击td时候需要让其变色,可以使用如下的写法。

<table id="table">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
var tableElem = document.getElementById('table')
tableElem.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target.nodeName.toLowerCase() == 'td' ? (target.style.background = 'red') : alert('table clicked');
}

在jQuery中,使用on就可以轻松搞定了。上述代码换做jQuery实现。

$('#table').on('click', 'td', function() {
    $(this).css('background', 'red');
})

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒