一、DOM事件级别
DOM0：element.onclick = function () {}
DOM2：window.addEventListener('click', function () {}, false) //false是冒泡，true是捕获，默认是false
DOM3：window.addEventListener('keyup', function () {}, false)
二、事件模型
三、事件流
第一阶段是捕获，第二阶段是目标阶段，第三阶段是冒泡
四、捕获的具体过程
window ==> document ==> html ==> body ==> 父节点 ==> 目标元素
冒泡就是反过来 从目标元素到window
五、event对象的常用方法
event.preventDefault
Event接口的**preventDefault()**方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation()或stopImmediatePropagation()，才停止传播。
阻止默认行为
event.stopPropagation
Event接口的stopPropagation()方法阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。如果要停止这些行为，请参见preventDefault()方法，它可以阻止事件触发后默认动作的发生。它也不能阻止附加到相同元素的相同事件类型的其它事件处理器，如果要阻止这些处理器的运行，请参见stopImmediatePropagation()方法。
阻止事件冒泡
event.stopImmediatePropagation
Event接口的**stopImmediatePropagation()**方法阻止监听同一事件的其他事件监听器被调用。
如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行stopImmediatePropagation()，那么剩下的事件监听器都不会被调用。
阻止当前元素上的其他事件的执行，同时阻止冒泡
event.currentTarget
Event接口的只读属性**currentTarget**表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而Event.target则是事件触发的元素。
指向事件绑定的元素，不是事件触发的元素
event.target
触发事件的对象 (某个DOM元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时，它与
event.currentTarget不同。
指向事件触发的元素
六、自定义事件
- 使用Event创建
//创建自定义事件
let eve = new Event('custom')
//监听自定义事件
ev.addEventListener('custom', function () {
console.log('我是自定义事件')
})
//触发自定义事件
ev.dispatchEvent(eve)
- 使用CustomEvent创建
第一个参数是事件类型；
第二个参数可以提供事件的配置信息对象分别是：
bubbles：一个布尔值,表明该事件是否会冒泡。
cancelable：一个布尔值,表明该事件是否可以被取消。
detail： 当事件初始化时传递的数据。
//创建自定义事件
let eve = new CustomEvent(’custom‘, {
detail: {
hazcheeseburger: true
}
})
//监听自定义事件
ev.addEventListener('custom', function (e) {
console.log('我是自定义参数', e.detail)
})
//触发自定义事件
ev.dispatchEvent(eve)
