當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS事件冒泡机制和兼容性添加事件

發布時間：2025/7/14 javascript 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS事件冒泡机制和兼容性添加事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本篇文章主要來講講事件的冒泡機制和添加事件的幾種方法。

一. JS的時間傳遞順序: 捕獲階段 -> 目標階段 -> 冒泡階段

捕獲階段是指從父層往子層找。比如 <body><div></div></body> ，我們會先找到 body，然后下一個才是 div。就像中央領導發布政策一樣。從上往下通知。
目標階段就是找到目標的那段時間，這個我們暫且不談。
冒泡階段就是從子層往外層傳。比如 <body><div></div></body> ，這個時候是先寫 div ，再找 body。往外依次冒泡。從內往外通知。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="div2"><div id="div1">點我</div></div> </body> <script type="text/javascript">var div1 = document.getElementById('div1'),div2 = document.getElementById('div2');div1.addEventListener('click', function(event) {console.log("A");}, true);div2.addEventListener('click', function(event) {console.log("B");});div1.addEventListener('click', function(event) {console.log("C")}, false);div2.addEventListener('click', function(event) {console.log("D");}, true); </script> </html>

答案是： DACB

1.我們的 addEventListener 默認的第三個參數是 false。false代表的是在冒泡階段觸發。true代表在捕獲階段觸發。
2.因為第一個和第四個函數都是true，所以它們會先被觸發，而 div1是被包在 div2 里面的，所以，先觸發的會是 div2的，所以是 DA。
之后進入冒泡階段，從內往外，第二個和第三個函數這個時候的順序是： CB

二. 兼容性地添加 JS 事件

如果我們要給按鈕添加事件，我們會怎么做呢？
也許我們會這么做<button onclick="console.log('1')">點我</button>
很明顯地，它破壞了標簽。我們應該讓 html 和事件分離，否則，我們下一次要修改這個按鈕就不好操作了。
1.耦合度太高。
所以我們這樣

const oBtn = document.getElementsByTagName('button')[0]; oBtn.onclick = function() {console.log('1'); }

然后，當我們要添加多個事件的時候，可能就帶來了問題。

const oBtn = document.getElementsByTagName('button')[0];oBtn.onclick = function() {console.log('1');}oBtn.onclick = function() {console.log('我是第二次');}

2.被覆蓋了。

所以我們改成了這樣

const oBtn = document.getElementsByTagName('button')[0];// addEventListeneroBtn.addEventListener("click", () => {console.log('1')});oBtn.addEventListener("click", () => {console.log('我是第二次')} );

上面的執行順序為 1 -> 第二次。很好，但是
3.IE7/8上報錯了。IE沒有addEventListener

所以我們改成了這樣

至此，大功告成，坑爹的 IE，還不支持 ES6/7

轉載于:https://www.cnblogs.com/can-i-do/p/7412298.html

總結

以上是生活随笔為你收集整理的JS事件冒泡机制和兼容性添加事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： react使用 PropTypes 和
下一篇：小程序添加动画效果--遇到的问题