JavaScript事件代理
事件绑定
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。
事件冒泡及捕获
关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。
img
事件委托
当需要点击h1标签或h1标签里元素的时候，在点击h1时启动监听效果。
<div>
<p>我是<span>p</span></p>
<h1>我是<span>h1</span></h1>
</div>
var div = document.querySelector('div')
//监听原事件委托的次数太多，严重影响性能
div.addEventListener('click',function(e ){
var t = e.target
while(t.tagName !== 'H1'){
t = t.parentNode
if(t === div){
t = null
break;
//while循环时，已找到父元素，就不需要再往上一级寻找，直接断开循环。
}
} if (t) {
console.log('h1')
} else{
console.log('你点击的不是div里的h1')
}
})
