使用原生 Javascript（Vanilla JS）为元素添加事件监听器，需要使用 EventTarget.addEventListener()函数。

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。EventTarget 可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象。

基本语法

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

参数

 type：表示监听事件类型的大小写敏感的字符串。
 listener：当所监听的事件类型触发时，调用它。它是一个实现了 EventListener 接口的对象，或者是一个函数。
 options [可选]：listener 属性的可选参数。可用的选项如下：
  capture [可选]：布尔值，表示 listener 会在该类型的事件捕获时传递到对应的 EventTarget 时触发其处理函数。
  once [可选]：布尔值，表示 listener 最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。
  passive [可选]：布尔值，设置为 true 时，表示 listener 永远不会调用 preventDefault()。
  signal [可选]：调用 AbortSignal 的 abort() 方法，移除监听器。
  useCapture [可选]：布尔值，表示在 DOM 树中注册了 listener 的元素，是否要先于它下面的 EventTarget 调用该 listener。

返回值

无（undefined）

定义事件处理函数

函数需要携带 event 参数，有两种定义方式。

  • 方式一：定义只处理一种事件的函数
  • 方式二：定义处理多种事件的函数，如定义处理 fullscreenchange 和 fullscreenerror 事件的函数。

定义只处理一种事件的函数

function eventHandler(event) {
    /* 处理 fullscreenerror 事件 */
}

定义处理多种事件的函数

如定义处理 fullscreenchange 和 fullscreenerror 事件的函数

function eventHandler(event) {
  if (event.type === "fullscreenchange") {
    /* 处理 fullscreenchange 事件 */
  } else {
    /* 处理 fullscreenerror 事件 */
  }
}

在函数内引用触发事件的元素

使用原生Javascript（Vanilla JS）在事件处理函数内引用当前元素的方式有两种：

  • 方式一：使用匿名或命名函数作为时间处理函数
  • 方式二：使用箭头函数作为事件处理函数

使用匿名或命名函数作为时间处理函数

此中方式下引用触发事件的元素的方式有三种：

  • 该语法中 this 是当前元素的引用，可以使用 this 引用当前元素
  • 使用 event.currentTarget 引用当前变量
  • 使用元素变量引用当前元素，如实例中的元素变量 el
el.addEventListener("click", function (event) {
  console.log(this.className); // 输出 el 的 className
  console.log(event.currentTarget === this); // 输出 `true`
  console.log(el === this); // 输出 `true`
});

使用箭头函数作为事件处理函数

该方式下 this 不指向当前元素，只能使用元素变量引用当前元素，如实例中的元素变量 el

el.addEventListener("click", (event) => {
  console.log(this.className); // 警告：`this` 并不指向 `el`
  console.log(event.currentTarget === this); // 输出 `false`
  console.log(event.currentTarget === el); // 输出 `true`
});