addEventListener和removeEventListener第三个参数
程序员文章站
2022-04-14 07:51:14
...
众所周知addEventListener和removeEventListenr是为dom添加或者卸载事件，比如：
let fun = () => {
alert("i am called");
};
document.addEventListener('click', fun);
// 当需要移除点击事件的时候，如下调用
// document.removeEventListener('click', fun);
参数
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, options]);
// 不建议使用
target.addEventListener(type, listener [, useCapture, wantsUntrusted ]); // Gecko/Mozilla only
先说下useCapture这个选项吧，说到这个选项我们就要讨论到事件冒泡和事件捕获
事件冒泡和事件捕获
简单的理解冒泡就是从下层到上层，而捕获就是从上层到下层
<body id="body">
<div id="div">我是一只小小小小鸟</div>
</body>
多层嵌套的情况下，点击div是即会触发body也会触发div的点击事件，那么哪个先触发呢？
冒泡是内层先触发，捕获是外层先触发。而useCapture默认是false也就是冒泡，所以div先触发(这里说的是chrome，其余浏览器可能具体实现不同)
当参数为useCapture
var div = document.createElement("div");
div.innerHTML = '我是一只小小小小鸟';
document.body.appendChild(div);
document.addEventListener('click', () => console.log('document click'));
div.addEventListener('click', () => console.log('div click'));
可以点击插入div的文字查看控制台的输出顺序
var div = document.createElement("div");
div.innerHTML = '我是一只小小小小鸟';
document.body.appendChild(div);
document.addEventListener('click', () => console.log('document click'), true);
div.addEventListener('click', () => console.log('div click'), true);
刷新页面后点击div后查看控制台的输出顺序
当参数为options
- capture 和上面的useCapture相同
-
once 只触发一次，触发之后自动
removeEventListener -
passive 为true则忽略事件内部的
preventDefault()
其余的不做表述了，可以查看上方的官方文档
add与remove设置了不同的值会以哪个为主？
只会检查addEventListener的参数配置
参数支持的情况
其他相关事情
建议addEventListener与removeEventListener成对出现。比如一个dom被移除了，而他绑定的事件没有被remove掉的话可能会造成一些其他问题
推荐阅读
-
addEventListener()和removeEventListener()追加事件和删除追加事件
-
addEventListener()的第三个参数
-
addEventListener()第三个参数useCapture (Boolean)详细解析_基础知识
-
addEventListener()第三个参数useCapture (Boolean)详细解析_基础知识
-
addEventListener()和removeEventListener()追加事件和删除追加事件
-
addEventListener和removeEventListener第三个参数
-
addEventListener和removeEventListener绑定有名函数和无名函数的区别