一、事件捕获与事件冒泡
事件的捕获和冒泡，分别由微软和网景提出。他们分别决定了事件发生顺序的问题。
<div class="outer">
<button class="inner">按钮</button>
</div>
如果在上面的代码中，outer盒子与inner按钮，分别绑定了一个点击事件。那么他们的执行顺序应该是怎么样呢？
1、事件捕获
事件捕获的顺序是由外到内，从最外面的元素开始检测。如果监听到有事件，则开始执行。
执行顺序为 outer ==> inner
2、事件冒泡
事件冒泡顺序与事件捕获相反，它是从最里面的元素开始往外检测，检测到有事件的话就开始执行事件。
执行顺序为 inner ==> outer
3、W3C规范
在网景和微软的冲突后。W3C开始介入，并将两者合并在一起。
规范为： 先捕获在冒泡
4、addEventistener 的第三个参数
element.addEventListener(event, function, useCapture)
在监听函数中，第一个为事件，第二个为执行的函数，第三个为是否冒泡
5、target和currentTarget的区别
e.target 指向的是被触发的元素
e.currentTarget 指向的是被监听的元素
this 就是 currentTarget
6、取消冒泡
e.stopPropagation()
二、自定义事件
// 创建自定义事件
element.addEventListener('click', ()=>{
const event = new CustomEvent('hi', {
info: {name: "lyw", age: 20},
bubbles: true, // 是否冒泡
cancelable: false // 是否可以取消冒泡
})
element.dispatchEvent(event)
})
// 调用自定义事件
element.addEventListener('lyw', (e)=>{
console.log(e.name)
})
