DOM Event - 事件
事件分两种，一种是由用户触发的，例如鼠标或键盘事件；另一种事件常由 API 生成。
EventTarget.addEventListener(): 该方法可以将事件处理函数绑定到不同的HTML elements上。
具体参考： developer.mozilla.org/en-US/docs/…
removeEventListener(): 该方法可被用于移除事件处理函数
DOM事件参考
developer.mozilla.org/zh-CN/docs/…
何为事件委托
把一个元素响应事件（click、keydown......）的函数委托到另一个元素，这就是事件委托。
事件捕获与事件冒泡 - event capturing and event bubbling
事件捕获与事件冒泡都是为了解决页面中的事件流（事件发生顺序）。
过程图
假设存在这样的一个页面
<html lang="zh-CN">
<body>
<div>
<p>Click here!</p>
</div>
</body>
</html>
事件捕获
事件捕获的概念由网景公司提出，事件由外而内发生，直到具体的元素。
假设click事件发生在<p>，那么根据事件捕获的概念，顺序为：
document -> html -> body -> diy -> p
事件冒泡
事件冒泡的概念由微软公司提出，事件由内而外发生，直到document对象。
假设click事件发生在<p>，那么根据事件冒泡的概念，顺序为：
p -> div -> body -> html -> document
阻止事件冒泡
event.stopPropagation()- 在事件处理函数中返回 false
- event.target==event.currentTarget，让触发事件的元素等于绑定事件的元素，也可以阻止事件冒泡；
阻止默认事件
event.preventDefault()- return false
事件代理
事件代理利用了事件流的特性，方便执行。
此处借用代码：juejin.cn/post/684490…
ul存在多个子元素li，倘若li数目过多，挨个监听就变得十分复杂。
此时将监听放在ul上，借助事件冒泡自内而外的特性，发生在li上的事件经过ul时可被监听到。
<ul class="color_list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>purple</li>
</ul>
<div class="box"></div>
.color_list{
display: flex;
display: -webkit-flex;
}
.color_list li{
width: 100px;
height: 100px;
list-style: none;
text-align: center;
line-height: 100px;
}
//每个li加上对应的颜色，此处省略
.box{
width: 600px;
height: 150px;
background-color: #cccccc;
line-height: 150px;
text-align: center;
}
function colorChange(e){
var e=e||window.event;//兼容性的处理
if(e.target.nodeName.toLowerCase()==="li"){
box.innerHTML="该颜色为 "+e.target.innerHTML;
}
}
color_list.addEventListener("click",colorChange,false)
此外，如果需要监听一个此时不存在，但随后由函数衍生出的元素时，将监听绑在其父元素身上，借助事件冒泡，也能成功找到。
