当我们有一个列表:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
希望为每个<li></li>
添加点击事件监听,我们一般这样做:
$('li').click(function(){
// do something...
});
但是,如果我们的列表不是在页面加载时由浏览器渲染的DOM,而是动态生成的呢,上面的事件监听就会失效了。
那么如何为页面中动态生成的元素添加事件监听呢?很简单:
$('ul').on('click', 'li', function(){
// do something...
});
这其实就是我们常说的“事件委托”。
在类似body>div>span这样的DOM结构中,单击<span>
,click事件会一直冒泡到<div>
和<body>
,因此发生在<a>
上的事件,<div>
和<body>
一样会受理。而利用事件传播(这里是事件冒泡,相对应的还有事件捕获)机制,就可以实现事件委托。
总结来说,事件委托就是事件目标自身不处理事件,而是把事件处理任务委托给父元素或祖先元素。
[完]
网友评论