js addEventListener绑定事件方法(详细介绍)
事件冒泡如果两个元素是嵌套的,那么当子元素事件触发后,父元素的对应事件会随后触发,这种事件自下而上的触发就是事件冒泡,类似水中的气泡往上冒例如下面代码,点击son元素后先触发son的点击事件,然后触发parent的点击事件<div id="parent" onclick="alert('parent')">parent<div id="son" onclick="alert('s
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
更多推荐
所有评论(0)