携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

addEventListener监听事件

我们先来看看捕获和冒泡的语法：

target.addEventListener(type, listener, options, useCapture)

type指的是事件类型，如：click、mousedown、mouseup、scroll等；

listener是监听事件函数，当监听到点击某个按钮的的时候，就会触发执行逻辑；

options是可选参数，包括多个可配置属性值：

capture：boolean值，表示listener会在定义事件类型的捕获阶段到达目标target节点时触发；
once：boolean值，表示listener在添加后仅执行一次，执行之后listener将会被移除；
passive：boolean值，设置为true时，表示listener监听函数中永远不会调用preventDefault()，否则客户端会忽略它并抛出一个控制台报错。
signal：AbortSignal。是个接口，表示信号对象，它允许你通过AbortController对象与Dom请求通信并在需要时将请求终止。这个参数作为配置参数的作用是当调用abort()方法时，listener监听会被移除。

useCapture是个布尔值。

其实在老版浏览器中，addEventListener监听方法中的第三个参数是布尔值，options配置属性是较新版浏览器加的，并且里面的属性也是随着浏览器的版本升级而逐步加的，不是通过一个版本来完成。

例如：第三个参数可以是布尔值，也可以是对象，在谷歌浏览器中的实现是2016年3月2日第49版本才开始支持的，而其中capture属性是52版本开始，once属性值从第55版本才开始支持；signal则是到第90个版本才正式实现。

addEventListener事件的返回值是undefined。

addEventListener是W3C DOM规范中提供的注册事件监听器的方法。