搜尋

首頁 >web前端 >js教程 >事件在JavaScript中冒泡？事件傳播解釋了

事件在JavaScript中冒泡？事件傳播解釋了

Jennifer Aniston
Jennifer Aniston原創
2025-02-16 09:33:10318瀏覽

事件在JavaScript中冒泡？事件傳播解釋了

鑰匙要點

  • >在JavaScript中冒泡的事件是指當一個元素嵌套在第二個元素內時，將調用事件處理程序的順序，並且兩個元素都註冊了同一事件的偵聽器。了解事件冒泡，以及事件捕獲和事件傳播，對於與JavaScript中的事件一起工作至關重要。
  • >事件傳播是事件冒泡和事件捕獲的一個術語。它是指調用給定事件類型的所有偵聽器的過程，該過程附在DOM樹的分支上的節點上。傳播是雙向的，可以分為三個階段：捕獲相，目標相和氣泡相。 通過調用事件對象的停止propagation方法，可以在任何偵聽器中停止事件傳播。這阻止了傳播，這意味著不會調用遵循當前目標的傳播路徑上的節點上註冊的所有聽眾。
    • 某些事件與瀏覽器在傳播結束時執行的默認操作相關聯。通過在偵聽器中調用預防違規方法，可以通過取消事件來避免此默認操作。
  • >
  • >事件冒泡是您在JavaScript旅行中可能遇到的一個術語。它與當一個元素嵌套在第二個元素中時調用事件處理程序的順序有關，並且兩個元素都註冊了同一事件的偵聽器（例如，單擊）。
    • ，但是事件冒泡只是難題的一部分。經常與事件捕獲和事件傳播一起提及。對所有三個概念的堅定理解對於與JavaScript中的事件合作至關重要 - 例如，如果您想實現事件委託模式。
>在這篇文章中，我將解釋這些術語中的每一個，並演示它們如何結合在一起。我還將向您展示對JavaScript事件流的基本了解如何為您提供對應用程序的細粒度控制。請注意，這不是事件的入門，因此假定對該主題的熟悉。如果您想了解更多有關活動的更多信息，為什麼不查看我們的書：JavaScript：新手到Ninja。

事件傳播是什麼？

>

>讓我們從事件傳播開始。這是事件冒泡和事件捕獲的毯子術語。考慮構建鏈接圖像列表的典型標記，例如：

單擊圖像不僅會為相應的IMG元素生成單擊事件，而且還為父母A，祖父li等，依此類推。窗口對象。

在DOM術語中，

圖像是事件目標，是點擊發起的最內向元素。事件目標以及其祖先，從其父對像到窗口對象，在DOM樹中形成一個分支。例如，在圖像庫中，該分支將由節點組成：img，a，li，ul，身體，html，文檔，窗口。

請注意，窗口實際上不是DOM節點，而是實現EventTarget接口，因此，為簡單起見，我們正在處理它，就像它是文檔對象的父節點。

這個分支很重要，因為它是事件傳播（或流動）的路徑。此傳播是為給定事件類型調用所有偵聽器的過程，該過程附在分支上的節點上。每個偵聽器都會使用一個事件對象來調用，該事件對象收集與事件相關的信息（稍後再詳細介紹）。

請記住，可以在同一事件類型的節點上註冊幾個聽眾。當傳播到達一個這樣的節點時，聽眾按照註冊的順序被調用。

>

>還應注意，分支確定是靜態的，也就是說，它是在事件的初始派遣時建立的。事件處理期間發生的樹修改將被忽略。

從窗口到事件目標和背部，

傳播是雙向的。這種傳播可以分為三個階段：

從窗口到事件目標父：這是

捕獲階段
  1. > 事件目標本身：這是
    2. >目標階段
  2. > 從事件目標父母回到窗口：
  3. > 區別這些階段的是被稱為聽眾的類型。
    4. >
事件捕獲階段

在此階段，只有

捕獲器

偵聽器被調用，即，使用AddeventListener的第三個參數的true註冊的聽眾：>

如果省略了此參數，則其默認值為false，並且偵聽器不是捕獲者。 >因此，在此階段，只有在從窗口到事件目標母體的路徑上找到的捕獲者。

事件目標階段
<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>
在此階段，在事件目標上註冊的所有聽眾都將被調用，而不管其捕獲標誌的價值如何。

事件冒泡階段

在事件起泡階段，

只能調用非主體。也就是說，只有在AddeventListener（）的第三個參數（）的第三個參數中註冊為false的偵聽器：>

>請注意，儘管所有事件都以捕獲階段，焦點，模糊，負載和其他一些事件流向事件目標，但不要冒出起泡。也就是說，他們的旅行在

>目標

階段之後停止。

因此，在繁殖結束時，分支上的每個聽眾都被完全調用了一次。

>事件冒泡並不是每種事件發生的。在傳播過程中，聽眾有可能通過閱讀事件對象的布爾布爾屬性來知道事件是否會冒出氣泡。

在以下圖中的W3C uievents規範的下圖中說明了三個事件流階段。

。

事件在JavaScript中冒泡？事件傳播解釋了

>版權所有©2016 World Wide Web財團（麻省理工學院，Ercim，Keio，Beihang）。

>訪問傳播信息

>我已經提到了事件對象的.bubbles屬性。該對象提供的其他許多屬性可供聽眾使用，以訪問相對於傳播的信息。

>
  • e.target參考事件目標。 >
    • > e.currenttarget是運行偵聽器註冊的節點。這是偵聽器調用上下文的值，即此關鍵字引用的值。 >。
  • 我們甚至可以通過e.Eventphase找出當前階段。這是一個整數，它指的是三個事件構造函數常數捕獲bubbling_phase和at_target。
    • 將其付諸實踐

>讓我們看看上述概念。在下面的筆中，有五個嵌套方盒，名為B0…b4。最初，只有外部框B0是可見的。內部鼠標指針將懸停在它們上面時會顯示。當我們單擊一個框時，右側的表中顯示了傳播流的日誌。

>請參閱codepen上的sitepoint（@sitepoint）的筆JMXDPZ。

>甚至可以單擊框外：在這種情況下，事件目標將是主體或HTML元素，具體取決於單擊屏幕位置。

>停止繁殖

通過調用事件對象的停止propagation方法，可以在任何偵聽器中停止事件傳播。這意味著不會調用遵循當前目標的傳播路徑上的節點上註冊的所有聽眾。相反，當前目標上附加的所有其他剩下的聽眾仍將接收事件。 >

>我們可以使用以前的演示的簡單叉子檢查此行為，只需在一個偵聽器中插入對stoppropagation（）的調用即可。在這裡，我們將這位新的聽眾備份為捕獲者，訪問了在窗口上註冊的回調列表：

>

以這種方式，無論單擊什麼盒子，傳播都早點停止，只能在窗戶上訪問捕捕器的聽眾。

>停止立即繁殖

>如其名稱所示，stopMediatiatiatiatiatiatiatiatiatiatiatepropagation將剎車直接扔進剎車，甚至阻止了當前聽眾的兄弟姐妹接收事件。我們可以看到最後一支筆的最小變化：
<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>
<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

>現在，日誌表中什麼都沒輸出，C1和C2窗口捕獲者都沒有行，因為在執行新偵聽器之後，傳播停止。

事件取消

某些事件與瀏覽器在傳播結束時執行的默認操作相關聯。例如，單擊鏈接元素或單擊表單提交按鈕會導致瀏覽器導航到新頁面或分別提交表單。

>可以通過在偵聽器中調用事件對象的另一種方法，e.preventdefault來避免執行此類默認操作。

結論

>這樣，我希望向您展示如何在JavaScript中冒泡和事件捕獲工作。如果您有任何疑問或評論，我很高興在下面的討論中聽到他們的聲音。

>

參考

文檔對像模型（DOM）級別2事件規範
  • w3c dom4 - 事件
  • > dom - 生活水平 - 事件
  • W3C UI事件 - DOM事件體系結構
  • > MSN - 事件和DOM
本文由Yaphi Berhanu和Dominic Myers進行了同行評審。感謝SitePoint所有的同行評審器製作SitePoint內容的最佳功能！

>常見問題（常見問題解答）有關javaScript中的事件冒泡的問題 當事件冒泡和事件捕獲之間的主要區別是什麼？元素已經為該事件註冊了一個句柄。主要區別在於事件相對於DOM樹的傳播方向。在發生冒泡的情況下，該活動首先觸發了最深的目標元素，然後彈出父母。另一方面，事件捕獲涉及事件從其父母開始。使用stoppropagation（）方法冒泡。該方法防止了捕獲和冒泡階段中當前事件的進一步傳播。這是一個示例：

element.AddeventListener（'click'，function（event）{

event.stoppropagation（）;

}）; 在此代碼中，如果單擊該元素，則該事件

>

>在JavaScript中冒泡的事件是什麼？例如，如果您有一個帶有幾個子元素的父元素，並且想在所有這些元素上收聽某個事件，則可以將事件偵聽器設置為父母，並利用事件冒泡。這樣，只要在子元素上觸發事件時，它就會起泡到父母，您可以在那里處理。

>

>我可以同時使用事件冒泡和捕獲嗎？這被稱為事件代表團。這是一種將事件處理委派給父元素的技術，而不是將事件偵聽器設置在單個子元素上。當您擁有大量的子元素時，這可能特別有用。

> javascript中事件傳播的默認行為是什麼？這意味著默認情況下，事件將從目標元素開始，並起泡到文檔的根。但是，您可以將AddeventListener（）方法與usecapture參數設置為true更改此行為，這將啟用事件捕獲。

>

>事件如何與嵌套元素一起使用nested Elements？事件是從嵌套元素發射的，該事件將通過DOM樹中嵌套元素的祖先傳播。這是事件冒泡。反過來，每個祖先都有機會回應活動。這種傳播一直持續到它達到文檔的根部或稱為stoppropagation（）。事件中事件的默認操作通過使用dreventDefault（）方法冒泡。如果事件可取消，此方法會取消該事件，這意味著不會發生屬於事件的默認操作。在JavaScript中，正在捕獲階段，目標階段和起泡階段。在捕獲階段，事件歸結為元素。目標階段是事件達到目標元素的位置。起泡階段是當事件從元素起泡時。

>我如何檢查事件是否在冒泡？

>您可以檢查事件是否通過使用該事件是否在使用事件對象的氣泡屬性。此屬性返回一個布爾值，指示事件是否通過DOM彈起。

>

> stoppropagation（）和stopimmediatiatepropagation（）？ ）方法用於停止事件的傳播。不同之處在於，stoppropagation（）阻止事件冒泡事件鏈，而stopimmediatiatepropagation（）則阻止了同一事件的其他聽眾被稱為。

以上是事件在JavaScript中冒泡？事件傳播解釋了的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html Static Integer Boolean Object if for while using Interface Property Delegate Event pointer number function default constructor dom this location ul table li kind ui Access Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：初學者測試功能JavaScript指南下一篇：初學者測試功能JavaScript指南

相關文章

看更多