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

你可能感兴趣的:(web前端(html,css,js),前端)