DOM监听事件详解
事件定义
事件并不是代码世界里的专用词，它仅仅是由简单的：监听、变化、通知 三要素组成
在前端世界中，事件可以定义为：代码监听（用户），（用户）操作产生变化、（程序员）得到通知。
DOM事件
如何监听事件
DOM level 0 事件监听方法： button.onclick = function(){}
这种方法是DOM level0就支持一种方法。可以用作简单的监听。这个方法存在一个很大的问题。那就是如果一个元素绑定事件时，有可能覆盖掉前面已经绑定好的事件。
DOM level 2 事件监听方法： button.addEventListener('click', function(){})
这种方法和level 0的绑定方法是一致 ，但监听事件每次都会生产一个全新的匿名函数，和前面的函数完全不同，不会覆盖掉前面已经绑定好的时间。
事件类型
Google: DOM events MDN
事件机制：冒泡 & 捕获
监听事件中。子元素被点击，意味着父元素也被点击了。如果同时监听子元素和父元素，就会有个通知的先后顺序
冒泡阶段（默认使用）
事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
简单来说：就是child 先通知，parent后通知
如果想阻止事件冒泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来阻止事件的冒泡传播。
捕获阶段
相反的，事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
简单来说：就是parent 先通知，child 后通知
可以通过改变addEventListener的第三个参数改变事件的执行顺序。(false为冒泡阶段执行，true为捕获阶段执行，留空则为false)
事件传入属性
事件传入属性：event，它传入了事件触发的属性
event.addEventListener('eventType',function(e){
console.log(e)
}
如何阻止事件：
e.prevenDefault(): 阻止默认事件，可以在容器上阻止但不推荐
e.stopPropagation(): 阻止冒泡事件
使用原生 JS 实现事件委托
基础：一个元素的父元素绑定了监听事件，而本身没有绑定监听事件。如果该元素被点击，也会触发父元素的监听事件
让我们举个例子：
这是一个ul，里面有4个li
<ul id="ul">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
现在要给每个li绑定一个监听事件
li1.addEventListener('click', function() {})
li2.addEventListener('click', function() {})
li3.addEventListener('click', function() {})
li4.addEventListener('click', function() {})
如果执行的函数都一样，且li个数很多，这就显得非常麻烦了。尤其是li个数不确定的时候，此时我们新增一个li，很显然，新增的li并没有绑定监听事件。
addButton.onclick = function(){
var li = document.createElement('li')
li.textContent = 'new'
document.querySelector('ul').appendChild(li)
}
//新增了li，但没有自动绑定监听事件
但是，在此例子中，如果点击了li，这个时候不也等于点击了ul吗？（参考上述基础）
因此可以直接把点击事件绑定在ul上
var ul = document.getElementById('ul')
ul.addEventListener('click', function() {})
那么是否就可以简单的监听父元素从而达到监听子元素的目的呢？
这是不对的。如果给ul添加个padding。
可以看出，当点击padding部分，也是会触发事件的。原因是我们监听的是ul。
所以这种绑定法，是有bug的，这明显不是我们想要的结果，于是我们可以给事件添加一个判断：
判断一下点击的目标，如果点的是li就触发，不然就不触发。
ul.addEventListener('click', function(e) {
// 检查事件源e.targe是否为Li
if (e.target && e.target.nodeName.toUpperCase == "LI") {
console.log("点击成功");
}
}
这里就要科普一下用到上面所说的事件传入属性，其中：
target：触发该事件时点击的元素
currentTarget：触发该事件时监听的元素
那么，还有什么bug吗？有的！
尝试给li加个span试试：
<ul id="ul">
<li id="li1"><span>1</span></li> //给第一个li加一个span
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
此时发现点击第一个li已经不触发绑定事件了。
虽然前面说道，监听父元素就能达到监听子元素的目的。
但是我们为了修复 ‘padding’ 的bug，添加了一个标签判断,导致 ‘span’ 不会触发绑定事件
if (e.target && e.target.nodeName.toUpperCase == "LI")
我们必须考虑，li是否还有后代元素。这时候我们就应该先判断点击的元素的祖先元素当中有没有li，如果有li，那点击的还是li。
所以，最后写出的事件委托函数优化如下
ul.addEventListener('click', function() {
let el = e.target \\获得实际点击的元素
\\以下while判定点击元素el的祖先元素是否有Li
while (el && !el.matches(selector)) {
el = el.parentNode
if (element === el) {
el = null
}
}
if (el) {
console.log('执行回调函数')
}
}
