#Javascript# 事件的傳播機制

Maxiye 發(fā)布于2019-08-26 18:27 / 1482人閱讀

摘要：當(dāng)前元素的某個事件行為被觸發(fā)，它所有的祖先元素，相關(guān)的事件行為也會被依次觸發(fā)，順序是從內(nèi)向外。如果祖先元素的這個行為綁定了方法，綁定的方法也會被觸發(fā)執(zhí)行，我們把事件的這種傳播機制叫做冒泡傳播這個傳播機制是所有瀏覽器的傳播機制。


    

document.body.onclick = function(){
console.log("body");
}
outer.onclick = function(){
console.log("outer");
}

inner.onclick = function(){
console.log("inner");// inner  outer  body
}

事件傳播有三個階段（捕獲--目標--冒泡）
Event.prototype
0: none 默認值，不代表任何的意思
1：capturing_phase:捕獲階段
2：at_target:目標階段（當(dāng)前事件源）
3：bubbling_phase:冒泡階段

三個階段處理的事情
點擊inner，觸發(fā)了inner的click事件
瀏覽器在執(zhí)行inner的click綁定的方法之前
1.從整個頁面document開始向內(nèi)查找，把inner的祖先元素遍歷一遍（為冒泡階段的傳播途徑做準備）
2.接下來找到目標階段找到當(dāng)前事件源。把事件源上綁定的方法執(zhí)行（沒綁定方法就不執(zhí)行了）
3.不僅觸發(fā)了當(dāng)前事件源的點擊行為，而且瀏覽器會按照第一個階段規(guī)劃的傳播路徑，從內(nèi)向外（inner -> outer->body->html->document）把祖先元素的click行為依次觸發(fā)。

當(dāng)前元素的某個事件行為被觸發(fā)，它所有的祖先元素，相關(guān)的事件行為也會被依次觸發(fā)，順序是從內(nèi)向外。如果祖先元素的這個行為綁定了方法，綁定的方法也會被觸發(fā)執(zhí)行，我們把事件的這種傳播機制叫做冒泡傳播

這個傳播機制是所有瀏覽器的傳播機制。

云服務(wù)器 GPU云服務(wù)器阻止事件傳播 javascript的事件事件機制事件冒泡機制

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110219.html

相關(guān)文章

JavaScript中幾個重要的知識點（2） ---- DOM事件

摘要：使用來移除事件，參數(shù)必須與要移除的事件處理函數(shù)地址指針相同。在低版本瀏覽器中，綁定級事件的方法為中的級事件的事件處理程序都是在冒泡階段執(zhí)行的。 JavaScript中幾個最重要的大知識點面向?qū)ο?DOM事件異步交互ajax 事件事件就是文檔和瀏覽器的瞬間交互行為 1.事件類型點擊: click 滾輪: scroll 滑動: move 進入: enter 加載: load ...

dantezhao 2019-08-20 17:33 評論0 收藏0
淺談React事件機制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因為Virtual DOM 在內(nèi)存中是以對象的形式存在的，所以React 基于 Virtual DOM 實現(xiàn)了...

moven_j 2019-08-02 15:29 評論0 收藏0
淺談React事件機制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因為Virtual DOM 在內(nèi)存中是以對象的形式存在的，所以React 基于 Virtual DOM 實現(xiàn)了...

MyFaith 2019-08-23 18:36 評論0 收藏0
瀏覽器事件模型中捕獲階段、目標階段、冒泡階段實例詳解

摘要：目標階段真正點擊的元素的事件發(fā)生了兩次，因為在上面的代碼中，既在捕獲階段綁定了事件，又在冒泡階段綁定了事件，所以發(fā)生了兩次。所以很明顯用直接綁定的事件發(fā)生在了冒泡階段。如果對事件大概了解，可能知道有事件冒泡這回事，但是冒泡、捕獲、傳播這些機制可能還沒有深入的研究實踐一下，我抽時間整理了一下相關(guān)的知識。本文主要對事件機制一些細節(jié)進行討論，過于基礎(chǔ)的事件綁定知識方法沒有介紹。特別少...

mylxsw 2019-08-21 10:38 評論0 收藏0
關(guān)于javascript事件機制的理解及事件監(jiān)聽的封裝

摘要：說到事件機制首先要說一下事件模型原始事件模型在原始事件模型中，事件是不會傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會作為元素的屬性被監(jiān)聽。標準函數(shù)綁定其中是否綁定在捕獲階段，表示采取捕獲方式，表示采取冒泡方式。說到事件機制首先要說一下事件模型 1.原始事件模型在原始事件模型中，事件是不會傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會作為元素的屬性被監(jiān)聽。這種方式和這種方式document.querySe...

lykops 2019-08-20 16:54 評論0 收藏0