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

資訊專欄INFORMATION COLUMN

DOM事件流中的冒泡和捕獲

marser / 3324人閱讀

摘要：那么哪個先彈呢由于此時事件處于第二階段，即處于目標階段，彈出順序取決的也不再是捕獲或冒泡，而是誰在代碼中先注冊，因此，在這段代碼中，彈出的是捕獲冒泡。

這是本人的第一篇文章，歡迎大家多多批評指正！

DOM2級事件中addEventListener的執行機制，多個addEventListener同時添加時的執行先后規律：

W3C的DOM事件觸發分為三個階段：
1.事件捕獲階段：即由最頂層元素（一般是從window元素開始，有的瀏覽器是從document開始，至于其中的差別我稍后會更新）開始，逐次進入dom內部，最后到達目標元素，依次執行綁定在其上的事件；
2.處于目標階段：檢測機制到達目標元素，按事件注冊順序執行綁定在目標元素上的事件；
3.事件冒泡階段：從目標元素出發，向外層元素冒泡，最后到達頂層（window或document），依次執行綁定再其上的事件。

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

下面是一個簡單的例子：



    
        
        事件流

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

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

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

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

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

讓我們加深理解，看下面這個例子：




    
        
        事件流

在這段代碼里，點擊inner，box上的捕獲事件最先執行，然后是outer上的捕獲事件，然后是inner上先注冊的事件，然后是inner上后注冊的事件，最后是box上的冒泡事件 彈出順序為："oBox捕獲"→"outer捕獲"→"inner冒泡"→"inner捕獲"→"outer冒泡"→"oBox冒泡"。

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

如果dom0級事件和dom2級事件同時存在，那執行順序會是怎樣呢？




    
    事件流

上面的例子中，我將outer的div在捕獲階段和冒泡階段都綁定了點擊事件，同時還在綁定了dom0級的點擊事件處理函數，這時如果我們點擊inner，我們會發現，事件的執行順序是這樣的oBox-Dom2捕獲--> outer-Dom2捕獲 --> inner-Dom2冒泡 --> inner-Dom2捕獲 -->outer-dom0 click!-->outer-Dom2冒泡 --> oBox-Dom2冒泡。

由此我們可以得出一個結論：當綁定dom0級事件元素不是目標元素時，那么綁定dom0級事件的處理是在冒泡階段處理并按事件注冊的先后順序執行（W3C先注冊的先執行) ,如果綁定dom0級事件的元素是目標元素時，則不論是捕獲階段綁定的處理函數還是冒泡階段綁定的處理函數以及dom0級事件處理函數，他們的執行順序都是按照注冊的順序執行（W3C先注冊的先執行) 。

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

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

相關文章

  • JavaScript-淺談DOM事件流

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

    haitiancoder 評論0 收藏0

  • DOM事件

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

    AlphaGooo 評論0 收藏0

  • DOM事件

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

    stormjun 評論0 收藏0

  • JavaScript 事件——“事件流和事件處理程序”的注意要點

    摘要：事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節點。如： ...

    Amio 評論0 收藏0

發表評論

0條評論

marser

男|高級講師

TA的文章

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