先上一段代码，点击子元素时先触发的是父元素的 click 事件
<html> <head> <script type="text/javascript"> function onLoads(){ document.getElementById("div1").addEventListener("click",(e) => { alert('1'); }, true); document.getElementById("div2").addEventListener("click",(e) => { alert('2'); }, true); } </script> </head> <body onload="onLoads()"> <div id="div1" style="400px;height:400px;background-color:red;border:1px;float:left; z-index:1;" > <div id="div2" style="50px;height:50px;background-color:blue;float:left; z-index:2;" ></div> </div> </body> </html>
点击蓝色代码时会先弹出 1，然后弹出2; 说明先父元素事件先触发，然后是子元素事件触发
看了文档后瞬间明朗了：
语法
element.addEventListener(event, function, useCapture)
参数值
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:
|
addEventListener 主要在第三个参数上面，
冒泡阶段：这类似与池塘里的涟漪，从事件中心点，向上层传播。而事件捕获和这个顺序正好相反。
所以，如果想要点击事件从 子元素->父元素 这样的顺序传递的话，改下参数即可
<script type="text/javascript">
function onLoads(){
document.getElementById("div1").addEventListener("click",(e) => {
alert('1');
}, false);
document.getElementById("div2").addEventListener("click",(e) => {
alert('2');
}, false);
}
</script>
如果，点击了子元素，不想点击事件向上冒泡的话，可以这样处理
<script type="text/javascript">
function onLoads(){
document.getElementById("div1").addEventListener("click",(e) => {
alert('1');
e.cancelBubble = true;
}, false);
document.getElementById("div2").addEventListener("click",(e) => {
alert('2');
e.cancelBubble = true;
}, false);
}
</script>
或者
<script type="text/javascript">
function onLoads(){
document.getElementById("div1").addEventListener("click",(e) => {
alert('1');
e.stopPropagation();
}, false);
document.getElementById("div2").addEventListener("click",(e) => {
alert('2');
e.stopPropagation();
}, false);
}
</script>