事件冒泡、事件委托和事件捕获
事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
事件委托依靠的就是事件冒泡和捕获的机制。
事件冒泡
一个很简单的例子，生活中，当你玩手机点击一个应用时，同时也代表你点击了手机屏幕。
网页中以下面的这个小例子来说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#box1 {
width: 400px;
height: 400px;
background: blueviolet;
}
#box2 {
width: 200px;
height: 200px;
background: aquamarine;
}
div {
overflow: hidden;
margin: 50px auto;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
function sayBox2() {
console.log('你点了小的box');
}
function sayBox1() {
console.log('你点了大的box');
}
// 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
document.getElementById('box2').addEventListener('click', sayBox2, false);
document.getElementById('box1').addEventListener('click', sayBox1, false);
</script>
</body>
</html>
我定义了两个盒子，一个大盒子一个小盒子，当我点击这个小盒子时，会发现大盒子中绑定的方法也被执行了，这就是一个很简单的事件冒泡，因为，当你点击这个小盒子的同时也点击了这个大盒子，根据事件机制一层一层向父元素传递。
事件捕获
将上面代码里监听事件的第三个参数改为true，然后点击小box，和冒泡一样，也是两个box都触发了事件，但是顺序反过来了，这种现象称为事件捕获。：
事件委托（事件代理）
通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度，这就是所谓的事件委托。
例如:现在有一个ul，ul里又有100个li，我想给这100个li都绑定一个点击事件，我们一般可以通过for循环来绑定，但是要是有1000个li呢？ 为了提高效率和速度，所以我们这时可以采用事件委托，只给ul绑定一个事件，根据事件冒泡的规则，只要你点了ul里的每一个li，都会触发ul的绑定事件，我们在ul绑定事件的函数里通过一些判断，就可以给这100li都触发点击事件了。
补充
如果想阻止冒泡，只需在函数里写上event.stopPropagation();，这样就OK了
最后说一点，如果元素被阻止冒泡了，千万别去用事件委托的方式监听事件，因为事件委托的原理是利用事件冒泡，当冒泡被阻止，就无法监听了。
上一篇： JavaScript
下一篇： Javascript