这是我参与更文挑战的第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>
执行结果：
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返回结果：
分析：点击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
<div id="xxx" onclick="fun()">点击</div>
<script>
let ele = document.getElementById('xxx');
ele.addEventListener('click', function() {
console.log('addEventListener点击了');
});
function fun() {
console.log('行内点击了');
}
</script>
结果如下：
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>
结果如下：
总结
给同一个DOM元素绑定多个onclick事件，后边的绑定事件覆盖前边的。
给同一个DOM元素绑定多个addEventListener事件，是不会互相覆盖的，彼此顺序执行。
给同一个DOM元素即使用onclick绑定事件，又使用addEventListener绑定事件（默认冒泡），他们之间是不会覆盖的。如果onclick事件是直接绑定行内绑定在DOM标签上的，会优先执行onclick绑定事件，接下来执行addEventListener事件；如果onclick事件是在js代码中注册的，则绑定事件顺序执行。
