js addEventListener绑定事件方法(详细介绍）

addEventListener是一种给元素绑定事件的方法
例如绑定点击事件，这样元素在被点击之后就会执行一些操作

let element = document.getElementById("element");
element.addEventListener(
  "click",
  function(e) {
    console.log("点击了");
  }
);

addEventListener有三个参数
1、type
表示所要监听事件类型的字符串。例如要给元素绑定点击事件，那么type就设置为"click"
2、listener
回调函数，表示事件触发后所要执行的动作，例如点击后输出“点击了”
3、options
第三个参数options是一个可选参数，可以传一个boolean，也可以传一个对象（面试阿里时被问了addEventListener第三个参数可不可以传对象，当时没答出来）

当传入一个boolean时，false表示事件在冒泡阶段触发（默认），true表示事件在捕获阶段触发，
当传入一个对象时，可以设置这些值

{
	capture:  Boolean，false表示事件在冒泡阶段触发（默认），true表示事件在捕获阶段触发
	once:  Boolean，true表示事件在触发一次后移除，默认是false
	passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。
	如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
	signal：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。
}

看起来参数有些多好像有些复杂，但其实并不复杂，前三个参数多看几遍就能理解其中的含义了，

具体来讲一下第四个参数signal
这个参数是用来移除事件的，它是一个AbortSignal对象（字面理解废弃信号）。当该AbortSignal对象的控制器AbortController（字面理解废弃控制器）发出废弃信号（abort（）方法被调用）时，绑定事件将被移除。
没听懂是吗？
还是举个例子吧。
例如要实现这么一种效果，5s前点击某元素可以出发点击事件，5s后点击该元素就不再触发点击事件了，可以这样写代码：

let controller = new AbortController();
let signal= controller.signal;

let element = document.getElementById("element");
element.addEventListener(
  "click",
  function (e) {
    console.log("点击了");
  },
  {
    signal: signal,
  }
);

//设置5秒后发出废弃信号
setTimeout(function(){
  controller.abort()
}, 5000)

从中我们可以看出AbortController对象可以调用废弃方法abort（）使AbortSignal对象变为一个废弃信号，此时AbortSignal的aborted属性将变为true。

参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener