javascript 中事件冒泡和事件捕獲機(jī)制的詳解
javascript 中事件冒泡和事件捕獲機(jī)制的詳解
二者作用：描述事件觸發(fā)時(shí)序問(wèn)題
事件捕獲：從document到觸發(fā)事件的那個(gè)節(jié)點(diǎn)，即自上而下的去觸發(fā)事件---由外到內(nèi)
事件冒泡：自下而上的去觸發(fā)事件---由內(nèi)到外
綁定事件方法的第三個(gè)參數(shù)，就是控制事件觸發(fā)順序是否為事件捕獲
true,事件捕獲；false,事件冒泡
一般默認(rèn)false,即事件冒泡
Jquery的e.stopPropagation會(huì)阻止冒泡，意思就是到DOM為止，祖先級(jí)的事件就不要觸發(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>
例子里我加了第三個(gè)true，是事件捕獲。
如果不加則是默認(rèn)的事件冒泡，這時(shí)候事件觸發(fā)時(shí)序就是自內(nèi)向外
以上就是javascript 中事件冒泡和事件捕獲機(jī)制的詳解，如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
javascript中SetInterval與setTimeout的定時(shí)器用法
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛，它們都用來(lái)處理延時(shí)和定時(shí)任務(wù)，比如打開(kāi)網(wǎng)頁(yè)一段時(shí)間后彈出一個(gè)登錄框，頁(yè)面每隔一段時(shí)間發(fā)送異步請(qǐng)求獲取最新數(shù)據(jù)等，本文文章通過(guò)代碼示例給大家介紹javascript中SetInterval與setTimeout的定時(shí)器用法2015-08-08
這篇文章主要介紹了通過(guò)a標(biāo)簽的超鏈接提交form表單方法匯總，十分的全面細(xì)致，也很實(shí)用，有需要的小伙伴可以參考下。2015-06-06
將rmb數(shù)字位錢數(shù)轉(zhuǎn)化為中文錢數(shù)的js函數(shù)
用力將用戶輸入的錢數(shù)，中文化輸出的函數(shù)代碼，需要的朋友可以參考下。2010-07-07
JavaScript常用數(shù)組操作方法,包含ES6方法
這篇文章主要介紹了JavaScript常用數(shù)組操作方法，包含ES6方法,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下2018-09-09
JavaScript中關(guān)于class的調(diào)用方法
下面小編就為大家?guī)?lái)一片JavaScript中關(guān)于class的調(diào)用方法。具有很好的參考價(jià)值，希望對(duì)大家有所幫助2017-11-11
本文給大家分享的是使用原生javascript實(shí)現(xiàn)的俄羅斯方塊的代碼，還沒(méi)有很完善，這里放出來(lái)，算是拋磚引玉吧，希望小伙伴們能夠喜歡。2015-03-03
easyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例
下面小編就為大家?guī)?lái)一篇easyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
在前端開(kāi)發(fā)中,為了優(yōu)化用戶的交互體驗(yàn),常需要用到彈窗來(lái)進(jìn)行提示,引導(dǎo)用戶操作,下面這篇文章主要給大家介紹了關(guān)于uniapp中常用的幾種提示彈框的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Javascript原型鏈的原理,結(jié)合實(shí)例形式深入分析了JavaScript原型鏈的原理與使用技巧,需要的朋友可以參考下2016-01-01
JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11