關于DOM2級事件的事件捕獲和事件冒泡

goji 發(fā)布于2019-08-19 18:34 / 3652人閱讀

摘要：事件冒泡階段，從目標元素出發(fā)，向外層元素冒泡，最后到達頂層或，依次執(zhí)行綁定再其上的事件。在中，利用第三個參數控制其是從哪個階段開始，是從捕獲階段開始，而則是跳過捕獲階段，從冒泡階段開始。

花一天時間研究完了DOM2級事件中addEventListener的執(zhí)行機制，作為開山第一帖，和大家講講多個addEventListener同時添加時的執(zhí)行先后規(guī)律：

如圖，大家都知道，W3c的DOM事件觸發(fā)分為三個階段：
①、事件捕獲階段，即由最頂層元素（一般是從window元素開始，有的瀏覽器是從document開始，至于其中的差別我稍后會更新）開始，逐次進入dom內部，最后到達目標元素，依次執(zhí)行綁定在其上的事件
②、處于目標階段，檢測機制到達目標元素，按事件注冊順序執(zhí)行綁定在目標元素上的事件。
③、事件冒泡階段，從目標元素出發(fā)，向外層元素冒泡，最后到達頂層（window或document），依次執(zhí)行綁定再其上的事件。

在addEventListener中，利用第三個參數控制其是從哪個階段開始，“true”是從捕獲階段開始，而“false”則是跳過捕獲階段，從冒泡階段開始。
看一個簡單的例子：

在這個例子里，如果我們點擊內層元素inner,那么處于捕獲階段的1最先彈出，接下來是目標元素2彈出，最后是處于冒泡階段的3彈出，即：1，2，3.
即使在代碼里變換三個綁定事件的順序，只要點擊的是inner,這個執(zhí)行順序就不會變。

那么問題來了，如果點擊的是外層outer的話呢？

要明白這個問題，我們必須明確一點：目標事件在哪一層，事件流就在哪一層回流，即使在outer事件下還有許多子孫節(jié)點，事件流都不會在outer之后往內流，此時，inner上的事件不會被觸發(fā)，因此在這段代碼中，只會彈出1和3。

那么這兩個數字哪個先彈呢？由于此時事件處于第二階段，即“處于目標階段”，彈出順序取決的也不再是捕獲或冒泡，而是誰在代碼中先注冊，因此，在這段代碼中，彈出的是：1→3.

綜上所述，事件在DOM中的執(zhí)行順序為：外層捕獲事件→內層捕獲事件→先注冊的目標事件→后注冊的目標事件→內層冒泡事件→外層冒泡事件

讓我們再看個例子來加深這個概念：

在這段代碼里，box上的捕獲事件最先執(zhí)行，然后是outer上的捕獲事件，然后是inner上先注冊的事件，然后是inner上后注冊的事件，最后是box上的冒泡事件
彈出順序為：1→2→3.2→3.1→4

補充一點，在ie8-中，由于addEventLister不起作用，我們使用attachEvent方法來綁定事件，此時在第二階段，也就是處于目標階段，如果目標元素上綁定了兩個事件，那么其執(zhí)行順序和addEventLister相反：誰后注冊誰先執(zhí)行。

GPU云服務器云服務器冒泡事件事件冒泡事件冒泡機制阻止冒泡事件

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

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

原生js之DOM事件相關

摘要：而由于級標準中并沒有定義事件相關的內容，所以事件級別只包括級，級和級三種。此屬性返回當前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。前端學習的東西有很多，現代前端開發(fā)，前端工程化的東西要懂，基礎的原生js也要懂，畢竟，框架都是有生命周期的，更替非常快，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內置，它叫vanilla.js。好吧，其實va...

learning 2019-08-22 13:51 評論0 收藏0
DOM 事件深入淺出（一）

摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的，我們的事件處理方式也是不一樣的。當然其優(yōu)點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。在項目開發(fā)時，我們時常需要考慮用戶在使用產品時產生的各種各樣的交互事件，比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發(fā)條件和觸發(fā)效果。本文就將帶大家深入淺出地了解...

macg0406 2019-08-20 11:31 評論0 收藏0
JavaScript-淺談DOM事件流

摘要：事件流指的是從頁面接收事件的順序。級事件規(guī)定方法的第三個參數設為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據級事件規(guī)定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。什么是事件？（敲黑板）事件，就是文檔或瀏覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級程序設計》）比如鼠標點擊，雙擊，滾動條滑動... 什么是事件...

haitiancoder 2019-08-20 10:49 評論0 收藏0
溫故js系列（10）-事件event

摘要：當用戶選擇文本框或中的一個或多個字符觸發(fā)。當文本框或內容改變且失去焦點后觸發(fā)。事件對象事件對象就是對象，通過處理函數傳遞。比如右擊文本框輸入區(qū)域，會彈出系統(tǒng)菜單點擊超鏈接會跳轉到指定頁面點擊提交按鈕會提交數據。前端學習：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 評論0 收藏0
DOM事件

摘要：與之間的交互是通過事件實現的。而，則將事件一直冒泡到對象。事件處理程序的名字以開頭，例如。級事件處理程序通過指定事件處理程序的傳統(tǒng)方式，就是將一個函數賦值給一個事件處理程序屬性。變動事件在結構發(fā)生變化時觸發(fā)，比如插入或者刪除節(jié)點。 javascript與HTML之間的交互是通過事件實現的。事件就是文檔或者瀏覽器中發(fā)生的一些特定的交互瞬間。事件流事件流描述的是頁面接受事件的順序，而I...

AlphaGooo 2019-08-02 15:55 評論0 收藏0