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

資訊專欄INFORMATION COLUMN

你不知道的javascript事件

imtianx / 2862人閱讀

摘要：然而和分別提出了完全相反的的概念事件冒泡和事件捕獲。所有的節點中包含了這兩個方法，它們都接受個參數要處理的事件名作為事件處理程序的函數和一個布爾值。事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段事件冒泡階段。

事件流描述的是從頁面中接受事件的順序。然而ie和netscape分別提出了完全相反的的概念：事件冒泡和事件捕獲。下面就說說這兩種事件流：

事件冒泡

事件冒泡，就是說時間開始時由具體的元素接受，然后逐級向上傳播到較為不具體的節點。看看下面的圖就比較清楚了：

比如說在圖中的

元素中添加一個click事件，那么這個
元素就是我們的單擊事件，然后click事件就會沿DOM樹向上傳播，在每一級節點上都會發生，直到傳播到document對象。看看下面的實例：

在理解實例事前先說說實例用到的核心操作：addEventListener(),這是DOM2事件定義的方法，用于處理添加指定事件處理程序的操作，有添加的方法當然也就會有刪除事件處理程序的方法removeEventListener()。所有的DOM節點中包含了這兩個方法，它們都接受3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。如果布爾值參數是false，表示在冒泡階段調用事件處理程序；如果是true，表示在捕獲階段調用事件處理程序(稍后會說到事件捕獲)，布爾值默認參數是false。




    
    
    
    Document
    


    
 外部盒
        
inner
            
box3

瀏覽器效果：

現在就說說實例中觸發事件的執行順序，挺有意思的，容易被繞進去：

點擊綠色區域

輸出的值也就是一個了。

點擊藍色區域

輸出的值有兩個，這個為什么呢，原因很簡單，藍色區域是在綠色區域內，藍色區域觸發click事件，在冒泡階段調用事件處理程序，點擊藍色區域，click事件沿DOM樹向上傳播，由類屬性為inner的元素的向上傳播到類屬性為box的元素，再依次向上傳播，故輸出的值為兩個。注意其輸出的順序：先輸出自身元素觸發事件中的值，然后再是父元素事件中的值。由內向外，這也就是事件冒泡的核心內容了。

點擊紅色區域

輸出的值有三個，原因就不再解釋了，原因和上面的一樣，同時也要注意下它們的輸出順序。通過這個實例對事件冒泡有了解了，接下來我們來深入下：

在我們實際開發中，是很不愿意事件在DOM層次中的傳播，很影響體驗效果，如上實例，觸發紅色區域的元素，我只想輸出一個值，然而偏偏輸出了三個值，是不是很煩啊？？？這個還是有解決方案的，stopPropagation()方法用于立即停止事件在DOM層次中的傳播，即取消進一步的事件冒泡或捕獲。看下面的例子（html代碼與上面實例一樣）：

紅色區域停止傳播

先說說上面的代碼中涉及到的一個局部變量event，相信很多人對這個變量都不是很理解，我剛接觸的時候也不是很理解這個變量，為什么會有這個變量，這個變量干嘛用的，怎么還可以調用方法和屬性，好神奇啊！！！現在我就來說說這個局部變量，這個變量就是事件對象，在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含了所有與事件有關的信息，包括了導致事件的元素、事件的類型以及其它與特定事件相關的信息。例如，鼠標操作導致的事件對象中，會包含鼠標位置的信息。

點擊紅色區域：

在紅色區域的click事件中加了stopPropagation()，這就立即停止了事件在DOM層次中的傳播，也就是取消進一步的事件冒泡，輸出的值也就只有一個了。

分別點擊藍色區域、綠色區域：

從輸出可以看出，這兩部分沒有加stopPropagation()，事件依舊在DOM層次中的傳播，同時注意它們的輸出順序。

2.藍色區域停止傳播

點擊藍色區域

成功取消了事件冒泡，輸出的值是一個即本身觸發輸出，而不是兩個值。

點擊紅色區域

這個輸出了兩個值，不是三個值，或許會感到很好奇，我取消的是藍色區域的事件捕獲，為什么click紅色區域只輸出兩個，其實正因為你在藍色區域內調用了stopPropagation()方法，其事件就會被停止冒泡，即使你點擊的是紅色區域，事件冒泡最終停留在藍色區域，傳播不到綠色區域，即輸出的值為兩個。

點擊綠色區域

因為綠色區域是三個顏色區域最外層區域，其子元素的取消事件冒泡對自己沒有影響，再者其父元素沒有做任何事件監聽，故輸出的值僅僅是其自身事件觸發得到。

3.綠色區域停止傳播

分別點擊綠色區域，藍色區域，紅色區域：

得到的效果和沒有做停止事件在DOM層中的傳播是一樣的，因為綠色區域是三個顏色區域最外層區域，其做取消事件冒泡，其子元素的事件冒泡對此沒有影響，再者其父元素沒有做任何事件監聽，故輸出的值和沒有做停止事件在DOM層中的傳播。

事件捕獲

事件捕獲是不太具體的節點應該更早接受到事件，而具體的節點應該最后接受到事件。看看下面的圖：

如圖中，div元素增加一個click事件，在事件捕獲中，document對象首先接受到click事件，然后事件沿DOM樹依次向下，一直傳播到事件的實際目標，即div元素。看看下面的實例：




    
    
    
    Document
    


    
 外部盒
        
inner
            
box3

這份代碼與冒泡事件的代碼大致相同，有變化的就是添加事件處理程序的操作addEventListener(),其中的第三個參數改為了true，表示在捕獲階段調用事件處理程序。

分別點擊綠色區域、藍色區域、紅色區域時執行順序：

輸出的原因相信大家都很清楚了，在這就不再解釋了，需要注意的是控制臺值得輸出順序，和冒泡事件輸出順序相反的。

接下來再講講捕獲事件中停止事件在DOM層次中的傳播，取消進一步的事件捕獲，這和冒泡事件的很不一樣，主要原因在于它們的傳播順序剛好相反，大家需要認真的思考，不要搞混淆了，現在就講講其中的一種比較容易出錯的，其它的大家可以自行思考，完整代碼已經貼出來了，大家看看下面的實例：

藍色區域的click事件中添加了stopPropagation()方法，取消進一步的事件捕獲，分別點擊不同區域，會產生什么效果呢？？？大家往下看：

點擊綠色區域

這個原因就不再解釋了，大家都懂！！！

點擊藍色區域

輸出的值有兩個，這個大家容易搞錯，在藍色區域的click事件中添加了stopPropagation()方法，取消了事件捕獲，不應該只出現“點擊了inner”的嗎，怎么還出現了“點擊了外部盒子”呢？？？這就又可能和事件冒泡搞混淆了，事件捕獲是由不太具體的節點應該更早接受到事件，而具體的節點應該最后接受到事件。簡單點來說是由外向內傳播。藍色區域的click事件中添加了stopPropagation()方法，只是該節點不會再向下傳播，該節點的父元素還是會傳播到該節點的，所以輸出的值會有兩個，而不是一個。

點擊紅色區域

輸出的值有兩個，這個的原因和上面的差不多，思想是一樣的，藍色區域的click事件中添加了stopPropagation()方法，該節點不會再向下傳播，點擊紅色區域，捕獲事件只能做到藍色區域就停止了。

事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段。首先發生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標接收事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。

在DOM事件流中，實際的目標如div元素在捕獲階段不會接受到事件，這也就意味在捕獲階段，事件從document到html元素再到body后就停止了。下一階段是處于目標階段，于是事件在div上發生，并在事件處理中被看成冒泡階段的一部分，然后，冒泡階段發生，事件有傳播會文檔。

分別點擊綠色區域、藍色區域、紅色區域

具體原因就在過多的去解釋了，這個就留給大家思考，清楚的的理解事件流機制就能很快的得出答案。
何處調用事件處理程序，何時在冒泡階段調用事件處理程序，何時在捕獲階段調用事件處理程序。

結束

終于寫完了！

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

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

相關文章

  • 精讀《你不知道的javascript（中卷）》

    摘要：強制類型轉換本章介紹了的數據類型之間的轉換即強制類型轉換包括顯式和隱式。強制類型轉換常常為人詬病但實際上很多時候它們是非常有用的。隱式強制類型轉換則沒有那么明顯是其他操作的副作用。在處理強制類型轉換的時候要十分小心尤其是隱式強制類型轉換。 前言 《你不知道的 javascript》是一個前端學習必讀的系列，讓不求甚解的JavaScript開發者迎難而上，深入語言內部，弄清楚JavaSc...

    李世贊 評論0 收藏0

  • 【筆記】 你不知道的JS讀書筆記——異步

    摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件，將這個回調再放入事件循環隊列中。 基礎：瀏覽器 -- 多進程，每個tab頁獨立一個瀏覽器渲染進程（瀏覽器內核） 每個瀏覽器渲染進程是多線程的，主要包括：GUI渲染線程 JS引擎線程 也稱為JS內核，負責處理Javascript腳本程序。（例如V8引擎） JS引擎線程負...

    junnplus 評論0 收藏0

  • 前端增長-你不知道的那些細節

    摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細節附贈常見核心前端面試問題與詳細解答官方博客前端學堂課件腦圖下載課程介紹前端知識點很多，很細碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端 精心打造全新課程，歡迎吐槽！反饋寶貴意見！ 在線課程：前...

    asce1885 評論0 收藏0

  • 前端增長-你不知道的那些細節

    摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細節附贈常見核心前端面試問題與詳細解答官方博客前端學堂課件腦圖下載課程介紹前端知識點很多，很細碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端 精心打造全新課程，歡迎吐槽！反饋寶貴意見！ 在線課程：前...

    Lyux 評論0 收藏0

  • 前端增長-你不知道的那些細節

    摘要：前端增長重新定義大前端精心打造全新課程，歡迎吐槽反饋寶貴意見在線課程前端增長你不知道的那些細節附贈常見核心前端面試問題與詳細解答官方博客前端學堂課件腦圖下載課程介紹前端知識點很多，很細碎。 showImg(https://segmentfault.com/img/bVbu250?w=500&h=497);前端增長-重新定義大前端 精心打造全新課程，歡迎吐槽！反饋寶貴意見！ 在線課程：前...

    baishancloud 評論0 收藏0

發表評論

0條評論

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