事件级别
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素(父元素上或者根节点上)。
举例：
比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：
<ul id="parent-list">
<li><a href="javascript:;" class="my_link">超链接一</a></li>
<li><a href="javascript:;" class="my_link">超链接二</a></li>
<li><a href="javascript:;" class="my_link">超链接三</a></li>
</ul>
当我们点击某个 <a> 标签的时候，需要触发响应的处理事件。
正常操作都是给每一个 <a> 绑定一个事件监听
window.onload = function(){
var parentNode = document.getElementById("parent-list");
var aNodes = parentNode.getElementByTagName("a");
for(var i=0, l = aNodes.length; i < l; i++){
aNodes[i].onclick = function() {
console.log('我是超链接 a 的单击相应函数');
}
}
}
这种做法并不是很高，效率也不高，并且过于消耗内存和性能。如果我们只绑定一次事件，就可以触发每一个元素的处理事件，这种方式会更优。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload = function() {
// 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）
document.getElementById('parent-list').addEventListener('click', function(event) {
event = event || window.event;
// e.target 表示：触发事件的对象
//如果触发事件的对象是我们期望的元素，则执行否则不执行
if (event.target && event.target.className == 'link') {
// 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {
console.log('我是ul的单击响应函数');
}
}, false);
};
</script>
</head>
<body>
<ul id="parent-list" style="background-color: #bfa;">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始向父节点冒泡。父节点捕获到事件之后，
开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点<a>。从而可以获取到相应的信息，并作处理。
总结：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。