国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

再探事件的三個階段

546669204 / 3158人閱讀

摘要：也就是說如果我們直接單擊目標，那么當事件被觸發時，正處于第二階段，這時所有的事件按照注冊先后順序觸發，與是否設置第三個參數無關。

我的原文鏈接：再探事件的三個階段
偶然間看到一篇經典博客，文中有一個例子挺有意思，大概是：

parent

問點擊div時，事件觸發的順序是什么？

根據事件的三個階段，我最初推測應該是先觸發捕獲事件再觸發冒泡事件，但實際結果卻是先彈出冒泡再彈出捕獲。這是為什么呢？
事情先要從 addEventListener() 方法說起，MDN文檔中關于此方法有明確描述：

如果事件監聽器恰好注冊到了事件目標上，那么這個事件會處于“目標階段”，而不是冒泡階段或者捕獲階段。在目標階段的事件會觸發所有的監聽器，而不在乎這個監聽器到底在注冊時 useCapture 參數值是什么。

也就是說如果我們直接單擊目標，那么當事件被觸發時，event target正處于第二階段，這時所有的事件按照注冊先后順序觸發，與是否設置第三個參數無關。

event 對象中有一個字段專門用于描述事件當前是處于哪個階段：eventPhase：

0：當前沒有事件需要處理；

1：捕獲階段，事件從window傳遞到目標；

2：命中階段，事件已經到達目標；

3：冒泡階段，事件從目標傳達到最頂層的window的過程；

W3C標準中有一張圖描述了這個過程：

其中提到的三個階段是 capture phase，target phase，bubble phase，事件對象的傳播是根據 propagation path 進行的。完整的例子如下：
codepen

我對事件的整個生命周期的各個階段的了解其實是非常有限的，個人推測如下：

操作系統捕獲事件（點擊、觸摸等）；

瀏覽器從操作系統那里獲得事件的相關信息并生成事件對象；

瀏覽器計算事件傳播的路徑；

按照路徑傳播并觸發相應節點上的事件；

最后由瀏覽器銷毀事件對象；

基于以上猜測，有幾點不是很明白：

為什么要設計成三個階段？

有些地方是講的：因為歷史原因——N公司提倡捕獲，M公司提倡冒泡，兩個公司互不妥協，于是標準組織干脆兼容兩者，讓事件跑一個來回，倘若不支持某個過程則靜默出進入相關階段就好。久而久之，大家都認了這個規則，但是實際上來說讓事件跑一個來回效率上肯定是不高的，而且從我的理解來看只進行捕獲或者冒泡也是合乎邏輯的。所以為什么現代瀏覽器（比如chrome）要同時支持兩種傳播方式呢？

傳播路徑如何確定？

上文中說到事件在傳播前，瀏覽器會先為其計算出傳播路徑，然而DOM樹表面上看并不是一棵查找二叉樹，只是一種描述層級關系的樹狀數據結構。那么假設瀏覽器從操作系統拿到了事件的基本信息（點擊位置，哪個鍵位，發生時間等），瀏覽器怎么在這樣的樹狀結構中查找出一條確定的路徑呢？遍歷當然是可以的，但是這樣效率是否太低？如果每個元素都有一個獨一無二的ID，對這個路徑查找問題有幫助嗎？

事件與其它過程如何交互？

問題可能說的有點抽象，假設我們在div元素上綁定了一個hover動畫，那么當鼠標劃過時需要發生兩件事情：展示動畫和觸發mouseover事件。我覺得合理的設計應該是先觸發動畫再觸發事件，有兩種可能性：

瀏覽器在事件傳播前觸發動畫，無論是捕獲還是冒泡，對動畫觸發先后沒有影響；

瀏覽器在在事件傳播過程中觸發動畫，那么動畫觸發順序可能和采用捕獲還是冒泡有關系；

請不吝賜教。

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

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

相關文章

  • 再探Watson服務（二）

    摘要：二基本服務簡單使用語音文本轉換假定已經完成關于的注冊和服務的創建。但是協議是一種非持久的單向的網絡協議。而彌補了這一缺點，它是一種全雙工通信協議，在通過建立握手后，單獨建立一條通道用以服務器和瀏覽器之間的信息傳送。 這是這個系列的第二篇文章，主要基于上一篇文章中提到服務進行一些基礎的功能實現。 二. 基本服務簡單使用 2.1 speech to text(語音文本轉換) 假定已經完成關...

    Null 評論0 收藏0

  • Puppeteer再探--自動把SF文章推薦到掘金

    摘要：今天接著介紹看過上篇的同學，應該都會用的高級爬蟲功能了，附上姐妹篇鏈接除了爬蟲之外，也可以幫你完成一些頁面上的重復操作，也可以當作自動化測試開門見山，今天的目標是，爬取頭條前端的文章，自動推薦到掘金廢話不多說，直接上動圖看效果圖很大，請稍等 今天接著介紹Puppeteer 看過上篇的同學，應該都會用Puppeteer的高級爬蟲功能了，附上姐妹篇鏈接：https://segmentfa...

    darkbaby123 評論0 收藏0

  • 理解DOM事件流的三個階段

    摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。 本文主要解決兩個問題： 什么是事件流 DOM事件流的三個階段 起因 在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...

    xiangzhihong 評論0 收藏0

  • 理解DOM事件流的三個階段

    摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。 本文主要解決兩個問題： 什么是事件流 DOM事件流的三個階段 起因 在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...

    afishhhhh 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<