JS提供了很多操作DOM的基础API，它们是实现复杂web应用的基础。

其中事件目标EventTarget对象，它是很多基础对象的基类，包括Element Document和Window。是所有DOM对象事件行为的抽象。

EventTarget

EventTarget提供3个跟事件有关的方法:

方法名	描述
addEventLister()	添加事件监听
removeEventLister()	移除事件监听
dispatchEvent()	触发事件

addeventListener()

2个必填参数

type 事件类型字符串
listener 一个function或EventListener对象(形式如:{ handleEvent: function })，作为相应函数。

一个最简单的示例：

document
  .querySelector('.btn')
  .addEventListener('click', e => console.log(e.type)) // click

2个可选参数

options
- capture 是否在捕获阶段触发
- once 是否只触发一次
- passive 表示是否不允许调用event.preventDefault()来阻止浏览器默认行为执行。默认值是false。不过chrome和firlFox已经将Window,Document和Document.body的触摸和滚动事件的passive设为true，因为阻止这些默认行为可能导致主线程阻塞，滑动变得卡顿。
useCapture 是否在捕获阶段触发事件，默认是false，即在冒泡阶段触发。

更多注册方式：

// 在捕获期间触发事件
document
  .querySelector('.btn')
  .addEventListener(
    'click',
    e => console.log(e.type),
    true // <== 使用useCapture参数
  )
// 或
document
  .querySelector('.btn')
  .addEventLister(
    'click',
    e => console.log(e.type),
    { capture: true } // <== 使用options参数
  )

注意事项

对统一标签重复注册
- 如果是匿名函数或者不同的函数，会顺序执行
- 如果是同一函数对象，只会执行一次
removeEventListener()时参数必须一一匹配，所以绑定匿名函数的事件将无法被删除

removeEventListener()

移除事件监听，跟addEventListener()的参数一模一样，调用时也应跟注册时使用一模一样的参数来移除事件。

dispatchEvent()

触发指定元素事件。接受一个Event(或CustomEvent对象)对象作为参数。

const buildEvent = new Event('build')
const btn = document.querySelector('.btn')
btn.addEventListener('build', () => console.log('build'))
btn.dispatchEvent(buildEvent)

CustomEvent对象的构造函数多了一个customEventInit的可选参数，有3个可选子属性：

detail作为参数传给句柄函数
bubbles 表示事件是否启用冒泡
cancelable 表示事件是否可用取消

const buildEvent = new CustomEvent('build', { detail: 'ok' })
function buildHandle (e) {
  console.log(e.detail) // ok
}

原创不易欲转先告知，欢迎加我交流：

EventTarget 关于DOM的事件API