JS重复事件绑定会彼此覆盖吗

最新推荐文章于 2023-03-27 14:44:42 发布

是小木啊

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量979

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/weixin_45743513/article/details/117931186

版权

这篇博客探讨了DOM事件处理程序的两种主要方式——DOM0级和DOM2级事件处理，特别是针对同一个DOM元素的多次事件绑定。在DOM0级事件处理中，多次绑定只会执行最后一次绑定的函数；而在DOM2级的addEventListener中，多次绑定会依次执行所有函数。此外，文章还通过实例解释了事件冒泡和捕获的概念，展示了事件如何从目标元素逐级传递到祖先元素的过程。

摘要由CSDN通过智能技术生成

我们知道，DOM事件处理程序主要有两种（暂不考虑IE事件处理程序），一种是DOM0级事件处理程序的 on + ‘事件类型’，另一种是DOM2级事件处理程序中的addEventListener。如果我们给一个DOM元素用两种事件处理方式都绑定了事件处理函数，那浏览器会怎么处理呢？？如果对同一个元素进行多个事件绑定浏览器又是怎么处理？？
接下来以点击事件为例，来看看这两种事件处理程序对多次事件绑定到底是怎么处理的

on + ‘事件类型’

on + ‘事件类型’有两种写法：一种是直接在元素标签上绑定事件，这种写法只能绑定一个事件，另一种是在JS代码中绑定，这种写法允许我们多次绑定，但是只执行最后一次绑定的处理函数。


<div id="xxx" onclick="t()">点击</div>

<script>
let ele = document.getElementById('xxx');

ele.onclick = fun;

function fun() {
    console.log('script点击了');
}
function t() {
    console.log('行内点击了')
}
</script>

JS中多次绑定


<div id="xxx">点击</div>

<script>
let ele = document.getElementById('xxx');
ele.onclick = function() {
    console.log('第一次');
}
ele.onclick = function() {
    console.log('第二次');
}
</script>

addEventListener


<div id="xxx">点击</div>

<script>
let ele = document.getElementById('xxx');
ele.addEventListener('click', function() {
    console.log('第一次');
});

ele.addEventListener('click', function() {
    console.log('第二次');
});
</script>

我们知道addEventListener是有第三个参数的，第三个参数为false时为冒泡事件，为true时为捕获事件
。以下是来引自于JS中事件冒泡和捕获的一个例子，可以看一下。具体关于捕获和冒泡的知识点这里
不多说，毕竟这里主要是说重复事件绑定的嘛。

<html>
<meta charset="utf-8">
<div id="s1">s1
    <div id="s2">s2</div>
</div>
</html>

<script>
let s1 = document.getElementById('s1');
let s2 = document.getElementById('s2');
s1.addEventListener("click", function (e) {
    console.log("s1 冒泡事件");
}, false);
s2.addEventListener("click", function (e) {
    console.log("s2 冒泡事件");
}, false);

s1.addEventListener("click", function (e) {
    console.log("s1 捕获事件");
}, true);

s2.addEventListener("click", function (e) {
    console.log("s2 捕获事件");
}, true);

s2.onclick = function() {
    console.log('s2 click')
}
</script>

分析：点击s2，首先是捕获阶段，click事件从document -> html -> body -> s1，输出‘s1捕获事件’
然后继续传播到真正的点击目标对象s2，s2上注册了捕获，冒泡，以及click事件，则按照定义顺序输出：‘s2冒泡事件’，‘s2捕获事件’，‘s2 click’
接下来事件冒泡阶段，按照s2 -> s1 ->body -> html -> document，冒泡到s1，输出‘s1冒泡事件’