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表示事件在触发一次后移除，默认是falsepassive: 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

js addEventListener绑定事件方法(详细介绍）相关推荐

js循环绑定事件问题及解决方法
js初学者经常遇到的循环绑定事件问题 js循环绑定事件在编写JS代码的时候,我们经常会遇到要对一系列元素进行事件绑定的情况,然后就会理所当然的开一个for循环,对元素的事件进行赋值等操作,最后运行的 ...
原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
如何更换安装鸿蒙系统,华为鸿蒙系统2.0如何进行安装？鸿蒙系统2.0安装方法详细介绍...
华为鸿蒙系统2.0如何进行安装?现在已经可以安装鸿蒙系统2.0,但是你不清楚安装,下面就让浏览器小编为大家带来,鸿蒙系统2.0安装方法详细介绍. 部分更新了华为鸿蒙OS用户表示,安卓和鸿蒙的应用软件都 ...
鸿蒙系统可以安装的浏览器,华为鸿蒙系统2.0如何进行安装？鸿蒙系统2.0安装方法详细介绍...
华为鸿蒙系统2.0如何进行安装?现在已经可以安装鸿蒙系统2.0,但是你不清楚安装,下面就让浏览器小编为大家带来,鸿蒙系统2.0安装方法详细介绍. 部分更新了华为鸿蒙OS用户表示,安卓和鸿蒙的应用软件都 ...
php ucenter home登录,UCenter Home 2.0 安装方法详细介绍
本教程为大家介绍 UCenter Home 2.0 的安装方法(以虚拟主机为例).在安装 UCenter Home 2.0 之前,请确认在服务器上已经安装过 UCenter ,UCenter 的安装方 ...
怎么使用小爱同学音响_小爱音箱mini怎么样如何使用小爱音箱mini使用方法详细介绍...
小爱音箱mini怎么样如何使用?相信小伙伴们一定很好奇,小米音响mini首发仅需99元,下面小编为大家带来了小爱音箱mini使用方法详细介绍,感兴趣的小伙伴赶紧跟着小编一起来看看吧. 小爱音箱mini ...
python定义数组的方法_Python数组定义方法详细介绍
本文实例讲述了Python数组定义方法.分享给大家供大家参考,具体如下: Python中没有数组的数据结构,但列表很像数组,如: a=[0,1,2] 这时:a[0]=0, a[1]=1, a[[2]= ...
CreateFile函数使用方法详细介绍
CreateFile The CreateFile function creates or opens the following objects and returns a handle that ...
经典IDEF系统分析方法详细介绍
经典IDEF系统分析方法详细介绍 (转载) IDEF是ICAM DEFinition method 的缩写,是美国空军在70年代末80年代初ICAM(Integrated Computer Aided ...

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

js addEventListener绑定事件方法(详细介绍）相关推荐

最新文章

热门文章