为动态生成的元素添加事件监听
2016-12-30 本文已影响0人
Michael_lpf
当我们有一个列表：
<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>一样会受理。而利用事件传播（这里是事件冒泡，相对应的还有事件捕获）机制，就可以实现事件委托。
总结来说，事件委托就是事件目标自身不处理事件，而是把事件处理任务委托给父元素或祖先元素。
[完]
