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

資訊專欄INFORMATION COLUMN

JavaScript-淺談DOM事件流

haitiancoder / 1005人閱讀

摘要：事件流指的是從頁面接收事件的順序。級事件規(guī)定方法的第三個參數(shù)設為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級事件規(guī)定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。

什么是事件？（敲黑板）

事件，就是文檔或瀏覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級程序設計》）
比如鼠標點擊，雙擊，滾動條滑動...

什么是事件流？

先來看一個簡單的例子：




    
    Document

這時候我們點擊btn的同時，也可以視為同時點擊了btn的容器元素，甚至單擊了整個頁面。
事件流指的是從頁面接收事件的順序。
關于事件流，IE和Netscape提出了差不多相反的概念，IE提出的就是廣為人知的事件冒泡流，而Netscape提出的則是事件捕獲流。

1. 事件冒泡

事件冒泡，即事件開始時由最具體的元素接收，如上面例子中的btn，然后逐漸向上級傳播到較為不具體的節(jié)點。DOM2級事件規(guī)定addEventListener方法的第三個參數(shù)設為false，表示事件在冒泡階段觸發(fā)。

注：使用頻繁的事件委托實際上也是利用了事件冒泡。

還是相同的DOM結(jié)構為例：




    
    Document

如果我們點擊btn，那么這個click事件的傳播順序如下：

也就是，click事件首先在btn元素上觸發(fā)，而這個元素就是我們單擊的元素，然后click事件沿DOM樹向上傳播，在每一級的節(jié)點都會發(fā)生，直至傳播到document對象。
所有現(xiàn)代瀏覽器都支持事件冒泡。

2. 事件捕獲

事件捕獲，即事件從不太確定的節(jié)點接收，然后向下傳播到最具體的節(jié)點，事件捕獲的用意在于在事件到達預期目標之前捕獲它。DOM2級事件規(guī)定addEventListener方法的第三個參數(shù)設為true，表示事件在捕獲階段觸發(fā)。
還是相同的DOM結(jié)構為例：
將參數(shù)改為true




    
    Document

如果我們點擊btn，那么這個click事件的傳播順序如下：

在事件捕獲過程中，document對象首先接收到click事件，然后事件沿著DOM樹依次向下傳播。
目前支持事件捕獲流的瀏覽器有：IE9，Safari，Chrome，Opera，F(xiàn)irefox。
由于老版本瀏覽器不支持事件捕獲，建議大家更多的是用事件冒泡，在有特殊需要時再使用事件捕獲。

3. DOM事件流

根據(jù)DOM2級事件規(guī)定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。
還是相同的DOM結(jié)構為例：




    
    Document

如果我們點擊btn，那么這個click事件的傳播順序如下：

在DOM事件流中，實際的目標btn不會接收到事件。這意味著在捕獲階段，事件從document到btn-wrap就停止了，下一階段是“處于目標”階段，于是事件在btn上發(fā)生，然后冒泡階段發(fā)生，事件又傳播回文檔。

注：多數(shù)支持DOM事件流的瀏覽器都實現(xiàn)了一種特定行為，即使DOM2級事件規(guī)范明確要求捕獲階段不會涉及目標階段，IE9，Safari，Chrome，F(xiàn)irefox，Opera9.5及更高版本都會在事件捕獲階段觸發(fā)事件對象上的事件,這也是上圖btn被觸發(fā)兩次的原因。
IE9，Safari，Chrome，F(xiàn)irefox，Opera都支持DOM事件流，IE8及更早版本不支持DOM事件流。

本文知識點大多來自《JavaScript高級程序設計》一書，博主在這里也是做一次總結(jié)，鞏固一下相關知識，同時也希望沒接觸過事件流的童鞋們，有一個大概的概念。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80339.html

相關文章

  • 淺談JavaScript事件

    摘要：淺談事件事件流的事件流有提出的捕獲流的冒泡流以及級事件流。真實的過程取決于事件的目標元素以及各目標元素的祖先元素是否有事件處理函數(shù)。事件處理函數(shù)需要注意的指的是或后面討論。兩種方法都會給事件處理函數(shù)傳一個事件對象作為參數(shù)。 淺談JavaScript事件 事件流 JavaScript的事件流有：Netscape提出的捕獲流、IE的冒泡流以及DOM2級事件流。這里只討論DOM2級事件流。 ...

    IamDLY 評論0 收藏0

  • 淺談DOMContentLoaded事件及其封裝方法

    摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態(tài)有關的信息。事件可以用于檢測是否加載完畢，當時，表示加載完成。封裝事件以下，是封裝事件從而達到良好的兼容性的一個簡單的代碼實現(xiàn)。 我們在開發(fā)時，經(jīng)常需要檢測頁面是否加載完畢，以確保腳本安全運行，下面我們就來淺談一下檢測頁面是否加載完畢的那些事件們。 1. onload 事件 在頁面的所有資源加載完成時，window對...

    waruqi 評論0 收藏0

  • 淺談DOMContentLoaded事件及其封裝方法

    摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態(tài)有關的信息。事件可以用于檢測是否加載完畢，當時，表示加載完成。封裝事件以下，是封裝事件從而達到良好的兼容性的一個簡單的代碼實現(xiàn)。 我們在開發(fā)時，經(jīng)常需要檢測頁面是否加載完畢，以確保腳本安全運行，下面我們就來淺談一下檢測頁面是否加載完畢的那些事件們。 1. onload 事件 在頁面的所有資源加載完成時，window對...

    leon 評論0 收藏0

  • 淺談事件冒泡與事件捕獲

    摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流事件發(fā)生順序的問題。事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。 Click me! 上面的代碼當中一個div元素當中有一個p子元素，如果兩個元素都有一個cli...

    zhunjiee 評論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

    LiuRhoRamen 評論0 收藏0

發(fā)表評論

0條評論

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