溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了js如何實現捕獲與冒泡機制，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
先從事件綁定機制說起, 事件綁定機制通過綁定方法addEventListener()實現,
element.addEventListener(event, function, useCapture)
| 參數 | 描述 |
|---|---|
| event | 必須。字符串，指定事件名。 注意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對象參考手冊。 |
| function | 必須。指定要事件觸發時執行的函數。 當事件對象會作為第一個參數傳入函數。 事件對象的類型取決于特定的事件。例如， "click" 事件屬于 MouseEvent(鼠標事件) 對象。 |
| useCapture | 可選。布爾值，指定事件是否在捕獲或冒泡階段執行。 可能值:
|
我們可以看到第三個參數是布爾值, true表示在捕獲階段執行, 而false指在冒泡階段執行
捕獲(capture)和冒泡(bubble)是事件傳播過程中的兩個概念, 比如用戶單擊某個元素, 但由于元素處于父元素內, 該父元素又處于document對象中, document對象又處于window對象中, 因此該單擊事件實際發生在該元素, 父元素, document, window對象上, 而事件傳播過程就是瀏覽器決定依次觸發哪個對象的事件處理函數的過程.
DOM事件模型將事件傳播過程分為兩個階段: 捕獲階段和冒泡階段
在事件捕獲階段, 事件從最頂級的父元素逐層向內傳遞,
在冒泡階段, 事件從事件發生的直接元素 , 逐層向父元素傳遞
這里舉個簡單的例子:
點擊孫子元素, 給body中的元素都添加點擊事件并輸出觸發事件的對象id:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="父級">
<div id="兒子">
<div id="孫子" >
</div>
</div>
</div>
</body>
<script type="text/javascript">
var a = document.getElementById('父級'),
b = document.getElementById('兒子'),
c = document.getElementById('孫子');
a.addEventListener("click",show, true);
b.addEventListener("click",show, true);
c.addEventListener("click",show, true);
console.log("前3為捕獲,后三個為冒泡");
a.addEventListener("click",show, false);
b.addEventListener("click",show, false);
c.addEventListener("click",show, false);
function show(even){ console.log(this.id); }
</script>
</html>
其中兩條孫子輸出相同被折疊了, 可以看到前三個是以捕獲順序, 第三個參數為true, 順序是從父親到孫子
后三個為false意思是冒泡順序, 順序是孫子到父級,即從內到外
實際上捕獲和冒泡時最外層和的元素并不是父級div,
捕獲時實際上是:
document-->html-->body-->父級div-->兒子div-->孫子div
冒泡時相反, 只不過body及以上沒添加事件并輸出, 所以在例子中沒顯現出來
對于事件代理來說，在事件捕獲或者事件冒泡階段處理并沒有明顯的優劣之分，但是由于事件冒泡的事件流模型被所有主流的瀏覽器兼容，從兼容性角度來說還是建議大家使用事件冒泡模型。
以上就是關于js如何實現捕獲與冒泡機制的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
