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

·  阅读 3656
JS重复事件绑定会彼此覆盖吗

这是我参与更文挑战的第7天,活动详情查看: 更文挑战

前言

我们知道,DOM事件处理程序主要有两种(暂不考虑IE事件处理程序),一种是DOM0级事件处理程序的 on + '事件类型',另一种是DOM2级事件处理程序中的addEventListener。如果我们给一个DOM元素用两种事件处理方式都绑定了事件处理函数,那浏览器会怎么处理呢??如果对同一个元素进行多个事件绑定浏览器又是怎么处理??

接下来以点击事件为例,来看看这两种事件处理程序对多次事件绑定到底是怎么处理的

on + '事件类型'

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

行内绑定 + JS绑定

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>
复制代码

执行结果:

image.png

JS中多次绑定

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

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

执行结果:

image.png

addEventListener

可以实现同一个元素绑定多个事件,各个处理函数按顺序执行,彼此不会出现覆盖现象

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

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

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

执行结果:

image.png

我们知道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返回结果:

image.png

分析:点击s2,首先是捕获阶段,click事件从document -> html -> body -> s1,输出‘s1捕获事件’

然后继续传播到真正的点击目标对象s2,s2上注册了捕获,冒泡,以及click事件,则按照定义顺序输出:‘s2冒泡事件’,‘s2捕获事件’,‘s2 click’

接下来事件冒泡阶段,按照s2 -> s1 ->body -> html -> document,冒泡到s1,输出‘s1冒泡事件’

2021/12/03改:

评论中有小伙伴说Chrome 89 更新了事件捕获冒泡触发顺序,目标元素的触发事件顺序不再按照注册顺序触发而是按照先捕获再冒泡的形式依次执行!,具体可以看这里

新版浏览器执行顺序如下:

image.png

可以看出触发元素的捕获冒泡事件已经与顺序无关了,虽然s2先定义了冒泡事件,却仍然按照先捕获后冒泡的顺序执行了。

两种事件混合

addEventListener + 行内绑定onclick

事件未被覆盖,先执行行内事件,再执行addEventListener

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

<script>
let ele = document.getElementById('xxx');
ele.addEventListener('click', function() {
    console.log('addEventListener点击了');
});

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

复制代码

结果如下:

image.png

addEventListener + JS代码中绑定onclick

事件不会覆盖,按照顺序执行

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


<script>
let ele = document.getElementById('xxx');
ele.addEventListener('click', function() {
    console.log('addEventListener点击了');
});

ele.onclick = fun;

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

结果如下:

image.png

总结

给同一个DOM元素绑定多个onclick事件,后边的绑定事件覆盖前边的。

给同一个DOM元素绑定多个addEventListener事件,是不会互相覆盖的,彼此顺序执行。

给同一个DOM元素即使用onclick绑定事件,又使用addEventListener绑定事件,他们之间是不会覆盖的。如果onclick事件是直接绑定行内绑定在DOM标签上的,会优先执行onclick绑定事件,接下来执行addEventListener事件;如果onclick事件是在js代码中注册的,则绑定事件顺序执行。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改