知识准备：
事件的处理流分成三个阶段：
- 一：事件捕获阶段：当某个元素触发某个事件时，首先会触发根元素document, 然后事件将沿dom树向下传播给目标节点的每一个祖先节点，直到目标节点。
- 二：目标阶段：到达目标元素之后，执行目标元素的事件处理函数
- 三：事件冒泡阶段：从目标元素开始，事件将沿着DOM树向上传播，直到根节点。
Paste_Image.png
事件绑定的缺点
我们看一个demo:
<ul id="parent">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
通过绑定添加事件：
window.onload = function() {
var parent = document.getElementById('parent');
var children = parent.getElementsByTagName('li');
for(var i = 0; i < children.length; i++){
children[i].onclick = function() {
alert(this.innerHTML);
}
}
}
弊端来了：如果这个ul的子元素允许无限的动态添加，就会出现问题：
1 新添加的元素不会绑定事件，所以需要每次添加li的同时添加绑定事件。
2 绑定的事件越多，性能越差。
为了解决这个问题，可以用事件代理——事件委托
事件委托
直接看demo
<ul id="parent">
<li> item 1</li>
<li> item 2</li>
</ul>
<scritpt>
window.onload = function() {
var parent = document.getElementById('parent');
parent.addEventListener('click', function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName.toUpperCase() == 'LI'){
alert(target.innerHTML);
}
});
}
</script>
好处
1 不需要为每一个元素都添加监听事件而是通过委托给父元素来处理。这样就减少了内存。性能提高了。
2 可以方便动态添加元素， 不需要再为新添加的元素重新绑定事件。
