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

2023-06-03 11:53| 来源: 网络整理| 查看: 265

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

前言

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

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

on + '事件类型'

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

行内绑定 + JS绑定

JS脚本中绑定的事件会覆盖行内事件。

点击 let ele = document.getElementById('xxx'); ele.onclick = fun; function fun() { console.log('script点击了'); } function t() { console.log('行内点击了') }

执行结果：

JS中多次绑定点击 let ele = document.getElementById('xxx'); ele.onclick = function() { console.log('第一次'); } ele.onclick = function() { console.log('第二次'); }

执行结果：

addEventListener

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

点击 let ele = document.getElementById('xxx'); ele.addEventListener('click', function() { console.log('第一次'); }); ele.addEventListener('click', function() { console.log('第二次'); });

执行结果：

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

s1 s2 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') }

点击s2返回结果：

分析：点击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 更新了事件捕获冒泡触发顺序，目标元素的触发事件顺序不再按照注册顺序触发！而是按照先捕获再冒泡的形式依次执行！，具体可以看这里。

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

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

两种事件混合 addEventListener + 行内绑定onclick

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

点击 let ele = document.getElementById('xxx'); ele.addEventListener('click', function() { console.log('addEventListener点击了'); }); function fun() { console.log('行内点击了'); }

结果如下：

addEventListener + JS代码中绑定onclick

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

点击 let ele = document.getElementById('xxx'); ele.addEventListener('click', function() { console.log('addEventListener点击了'); }); ele.onclick = fun; function fun() { console.log('行内点击了'); }

结果如下：

总结

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

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

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

【本文地址】

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

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

今日新闻

推荐新闻