溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
javascript 中事件冒泡和事件捕獲機制的詳解
二者作用：描述事件觸發時序問題
事件捕獲：從document到觸發事件的那個節點，即自上而下的去觸發事件---由外到內
事件冒泡：自下而上的去觸發事件---由內到外
綁定事件方法的第三個參數，就是控制事件觸發順序是否為事件捕獲
true,事件捕獲；false,事件冒泡
一般默認false,即事件冒泡
Jquery的e.stopPropagation會阻止冒泡，意思就是到DOM為止，祖先級的事件就不要觸發了
下面是我嘗試的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡與事件捕獲</title>
<script>
window.onload = function () {
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被觸發，"+this.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被觸發，"+this.id)
},true)
}
</script>
</head>
<body>
<div id="parent">
parent事件
<div id="child" class="child">
child事件
</div>
</div>
</body>
</html>
例子里我加了第三個true，是事件捕獲。
如果不加則是默認的事件冒泡，這時候事件觸發時序就是自內向外
以上就是javascript 中事件冒泡和事件捕獲機制的詳解，如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
