javascript 中事件冒泡和事件捕獲機制的詳解
javascript 中事件冒泡和事件捕獲機制的詳解
二者作用:描述事件觸發(fā)時序問題
事件捕獲:從document到觸發(fā)事件的那個節(jié)點,即自上而下的去觸發(fā)事件---由外到內(nèi)
事件冒泡:自下而上的去觸發(fā)事件---由內(nèi)到外
綁定事件方法的第三個參數(shù),就是控制事件觸發(fā)順序是否為事件捕獲
true,事件捕獲;false,事件冒泡
一般默認false,即事件冒泡
Jquery的e.stopPropagation會阻止冒泡,意思就是到DOM為止,祖先級的事件就不要觸發(fā)了
下面是我嘗試的例子:
<!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事件被觸發(fā),"+this.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被觸發(fā),"+this.id)
},true)
}
</script>
</head>
<body>
<div id="parent">
parent事件
<div id="child" class="child">
child事件
</div>
</div>
</body>
</html>
例子里我加了第三個true,是事件捕獲。
如果不加則是默認的事件冒泡,這時候事件觸發(fā)時序就是自內(nèi)向外
以上就是javascript 中事件冒泡和事件捕獲機制的詳解,如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
IE中document.createElement的iframe無法設(shè)置屬性name的解決方法
這篇文章主要介紹了IE中document.createElement的iframe無法設(shè)置屬性name的解決方法,需要的朋友可以參考下2015-09-09
GitHub上77.9K的Axios項目有哪些值得借鑒的地方詳析
提到axios,相信大家應(yīng)該都不會陌生,這篇文章主要給大家介紹了關(guān)于GitHub上77.9K的Axios項目有哪些值得借鑒的地方,需要的朋友可以參考下2021-06-06
如何在JavaScript中等分數(shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分數(shù)組的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
在服務(wù)端(Page.Write)調(diào)用自定義的JS方法詳解
自從[javascript]自定義MessageBox一文發(fā)布以后,很多網(wǎng)友都來信詢問,如何在服務(wù)端調(diào)用ShowInfo方法,周末休息想了個折中的辦法來實現(xiàn)2013-08-08
JS實現(xiàn)鼠標(biāo)點擊展開或隱藏表格行的方法
這篇文章主要介紹了JS實現(xiàn)鼠標(biāo)點擊展開或隱藏表格行的方法,實例分析了javascript操作table表格與css樣式的技巧,需要的朋友可以參考下2015-03-03

