事件委托的原理与实现

发表于

首先，我们设定一个列表

1
2
3
4
5
6
7
8
<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

我们假设要给每个li添加不同的事件，你可以给每个独立的li元素添加事件监听器，但有时这些li元素可能会被删除，可能会有新增，监听它们的新增或删除事件将会是一场噩梦，尤其是当你的监听事件的代码放在应用的另一个地方时。但是，如果你将监听器安放到它们的父元素上呢？你如何能知道是那个子元素被点击了？

简单：当子元素的事件冒泡到父ul元素时，你可以检查事件对象的target属性，捕获真正被点击的节点元素的引用。下面是一段很简单的JavaScript代码，演示了事件委托的过程：

1
2
3
4
5
6
7
8
9
//找到父元素，添加监听器。。。  
document.getElementById('parent-list').addEventListener('click', function (e) {  
    //e.target是被点击的元素  
    //如果被点击的是li元素  
    if(e.target && e.target.nodeName == 'Li') {  
        //执行操作，，，  
        console.log('List item', e.target.id.replace('post-'), "was clicked")  
    }  
})