#Javascript# 事件的傳播機制

Maxiye 發布于2019-08-26 18:27 / 1471人閱讀

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


    

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:目標階段（當前事件源）
3：bubbling_phase:冒泡階段

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110219.html

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

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

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

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

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

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

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

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

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

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

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