先上一段代碼，點擊子元素時先觸發的是父元素的 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="width:400px;height:400px;background-color:red;border:1px;float:left; z-index:1;" > <div id="div2" style="width: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>