亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JavaScript-淺談DOM事件流

haitiancoder / 1063人閱讀

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

什么是事件？（敲黑板）

事件，就是文檔或?yàn)g覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級(jí)程序設(shè)計(jì)》）
比如鼠標(biāo)點(diǎn)擊，雙擊，滾動(dòng)條滑動(dòng)...

什么是事件流？

先來看一個(gè)簡單的例子：




    
    Document

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

1. 事件冒泡

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

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

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




    
    Document

如果我們點(diǎn)擊btn，那么這個(gè)click事件的傳播順序如下：

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

2. 事件捕獲

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




    
    Document

如果我們點(diǎn)擊btn，那么這個(gè)click事件的傳播順序如下：

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

3. DOM事件流

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




    
    Document

如果我們點(diǎn)擊btn，那么這個(gè)click事件的傳播順序如下：

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

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

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

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

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

相關(guān)文章

  • 淺談JavaScript事件

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

    IamDLY 評論0 收藏0

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

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

    waruqi 評論0 收藏0

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

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

    leon 評論0 收藏0

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

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

    zhunjiee 評論0 收藏0

  • 2018 淺談前端面試那些事

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

    LiuRhoRamen 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<