javascript 中事件冒泡和事件捕獲機制的詳解

更新時間：2017年09月01日 15:38:40 投稿：lqh

這篇文章主要介紹了javascript 中事件冒泡和事件捕獲機制的詳解的相關(guān)資料,網(wǎng)上的相關(guān)資料有很多，但是講的不是多清楚，通過本文希望能讓大家理解掌握，需要的朋友可以參考下

javascript 中事件冒泡和事件捕獲機制的詳解

二者作用：描述事件觸發(fā)時序問題

事件捕獲：從document到觸發(fā)事件的那個節(jié)點，即自上而下的去觸發(fā)事件---由外到內(nèi)

事件冒泡：自下而上的去觸發(fā)事件---由內(nèi)到外

綁定事件方法的第三個參數(shù)，就是控制事件觸發(fā)順序是否為事件捕獲

true,事件捕獲；false,事件冒泡

一般默認(rèn)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，是事件捕獲。

如果不加則是默認(rèn)的事件冒泡，這時候事件觸發(fā)時序就是自內(nèi)向外

以上就是javascript 中事件冒泡和事件捕獲機制的詳解，如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript中SetInterval與setTimeout的定時器用法
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛，它們都用來處理延時和定時任務(wù)，比如打開網(wǎng)頁一段時間后彈出一個登錄框，頁面每隔一段時間發(fā)送異步請求獲取最新數(shù)據(jù)等，本文文章通過代碼示例給大家介紹javascript中SetInterval與setTimeout的定時器用法
2015-08-08
使用javascript提交form表單方法匯總
這篇文章主要介紹了通過a標(biāo)簽的超鏈接提交form表單方法匯總，十分的全面細(xì)致，也很實用，有需要的小伙伴可以參考下。
2015-06-06
將rmb數(shù)字位錢數(shù)轉(zhuǎn)化為中文錢數(shù)的js函數(shù)
用力將用戶輸入的錢數(shù)，中文化輸出的函數(shù)代碼，需要的朋友可以參考下。
2010-07-07
JavaScript常用數(shù)組操作方法,包含ES6方法
這篇文章主要介紹了JavaScript常用數(shù)組操作方法，包含ES6方法,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下
2018-09-09
JavaScript中關(guān)于class的調(diào)用方法
下面小編就為大家?guī)硪黄琂avaScript中關(guān)于class的調(diào)用方法。具有很好的參考價值，希望對大家有所幫助
2017-11-11
原生JavaScript編寫俄羅斯方塊
本文給大家分享的是使用原生javascript實現(xiàn)的俄羅斯方塊的代碼，還沒有很完善，這里放出來，算是拋磚引玉吧，希望小伙伴們能夠喜歡。
2015-03-03
easyui-edatagrid.js實現(xiàn)回車鍵結(jié)束編輯功能的實例
下面小編就為大家?guī)硪黄猠asyui-edatagrid.js實現(xiàn)回車鍵結(jié)束編輯功能的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
uniapp中常用的幾種提示彈框
在前端開發(fā)中,為了優(yōu)化用戶的交互體驗,常需要用到彈窗來進(jìn)行提示,引導(dǎo)用戶操作,下面這篇文章主要給大家介紹了關(guān)于uniapp中常用的幾種提示彈框的相關(guān)資料,需要的朋友可以參考下
2022-09-09
Javascript原型鏈的原理詳解
這篇文章主要介紹了Javascript原型鏈的原理,結(jié)合實例形式深入分析了JavaScript原型鏈的原理與使用技巧,需要的朋友可以參考下
2016-01-01
JS實現(xiàn)排行榜文字向上滾動輪播效果
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)排行榜文字向上滾動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11