一、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)