事件委托
事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
事件流
事件流
DOM事件流
事件捕获
点击一个目标元素，响应的顺序是从window到document到html....最后到目标元素，这个阶段叫捕获阶段。
简单说就是点击一个目标元素，windows会派一个人去看下这个目标元素在哪，从window到document到html....最后到目标元素。
事件捕获过程：
var ev = document.getElementById('ev')
window.addEventListener('click', function() {
console.log('windown')
}, true) //true是捕获，false是冒泡
document.addEventListener('click', function() {
console.log('document')
}, true)
document.documentElement.addEventListener('click', function() {
console.log('html')
}, true)
document.body.addEventListener('click', function() {
console.log('body')
}, true)
ev.addEventListener('click', function () {
console.log('ev')
},true)
捕获顺序
事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window ，这个阶段叫冒泡阶段。
冒泡过程把上面true改成false
var ev = document.getElementById('ev')
window.addEventListener('click', function () {
console.log('windown')
}, false) //true是捕获，false是冒泡
document.addEventListener('click', function () {
console.log('document')
}, false)
document.documentElement.addEventListener('click', function () {
console.log('html')
}, false)
document.body.addEventListener('click', function () {
console.log('body')
}, false)
ev.addEventListener('click', function () {
console.log('ev')
}, false)
冒泡顺序
阻止事件冒泡
若一个按钮在另一个按钮之上，点击这个会触发两个按钮的事件，使用阻止事件冒泡，只触发第一个点击事件
function preventBubble(event){
var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容
if (e && e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
案例：
没有阻止冒泡：
<body>
<div id="ev">
<button id="ev2">点击</button>
</div>
</body>
</html>
<script>
var ev = document.getElementById('ev')
ev.addEventListener('click', function () {
console.log('ev')
}, false)
ev2.addEventListener('click', function () {
console.log('ev2')
}, false)
</script>
会触发两次点击事件
添加阻止冒泡函数：
<body>
<div id="ev">
<button id="ev2">点击</button>
</div>
</body>
</html>
<script>
var ev = document.getElementById('ev')
ev.addEventListener('click', function () {
console.log('ev')
}, false)
ev2.addEventListener('click', function () {
preventBubble()
console.log('ev2')
}, false)
function preventBubble(event) {
var e = arguments.callee.caller.arguments[0] || event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容
if (e && e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
</script>
只执行button的点击事件，阻止了父级div的点击事件
