你不知道的javascript事件

marek 發(fā)布于2019-08-01 18:00 / 2621人閱讀

摘要：然而和分別提出了完全相反的的概念事件冒泡和事件捕獲。所有的節(jié)點(diǎn)中包含了這兩個(gè)方法，它們都接受個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個(gè)布爾值。事件流級(jí)事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段事件冒泡階段。

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

事件冒泡

事件冒泡，就是說(shuō)時(shí)間開(kāi)始時(shí)由具體的元素接受，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)。看看下面的圖就比較清楚了：

比如說(shuō)在圖中的

元素中添加一個(gè)click事件，那么這個(gè)

元素就是我們的單擊事件，然后click事件就會(huì)沿DOM樹(shù)向上傳播，在每一級(jí)節(jié)點(diǎn)上都會(huì)發(fā)生，直到傳播到document對(duì)象。看看下面的實(shí)例：

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




    
    
    
    Document
    


     外部盒
        inner
            box3

瀏覽器效果：

現(xiàn)在就說(shuō)說(shuō)實(shí)例中觸發(fā)事件的執(zhí)行順序，挺有意思的，容易被繞進(jìn)去：

點(diǎn)擊綠色區(qū)域

輸出的值也就是一個(gè)了。

點(diǎn)擊藍(lán)色區(qū)域

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

點(diǎn)擊紅色區(qū)域

輸出的值有三個(gè)，原因就不再解釋了，原因和上面的一樣，同時(shí)也要注意下它們的輸出順序。通過(guò)這個(gè)實(shí)例對(duì)事件冒泡有了解了，接下來(lái)我們來(lái)深入下：

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

紅色區(qū)域停止傳播

先說(shuō)說(shuō)上面的代碼中涉及到的一個(gè)局部變量event，相信很多人對(duì)這個(gè)變量都不是很理解，我剛接觸的時(shí)候也不是很理解這個(gè)變量，為什么會(huì)有這個(gè)變量，這個(gè)變量干嘛用的，怎么還可以調(diào)用方法和屬性，好神奇啊！！！現(xiàn)在我就來(lái)說(shuō)說(shuō)這個(gè)局部變量，這個(gè)變量就是事件對(duì)象，在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象中包含了所有與事件有關(guān)的信息，包括了導(dǎo)致事件的元素、事件的類型以及其它與特定事件相關(guān)的信息。例如，鼠標(biāo)操作導(dǎo)致的事件對(duì)象中，會(huì)包含鼠標(biāo)位置的信息。

點(diǎn)擊紅色區(qū)域：

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

分別點(diǎn)擊藍(lán)色區(qū)域、綠色區(qū)域：

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

2.藍(lán)色區(qū)域停止傳播

點(diǎn)擊藍(lán)色區(qū)域

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

點(diǎn)擊紅色區(qū)域

這個(gè)輸出了兩個(gè)值，不是三個(gè)值，或許會(huì)感到很好奇，我取消的是藍(lán)色區(qū)域的事件捕獲，為什么click紅色區(qū)域只輸出兩個(gè)，其實(shí)正因?yàn)槟阍谒{(lán)色區(qū)域內(nèi)調(diào)用了stopPropagation()方法，其事件就會(huì)被停止冒泡，即使你點(diǎn)擊的是紅色區(qū)域，事件冒泡最終停留在藍(lán)色區(qū)域，傳播不到綠色區(qū)域，即輸出的值為兩個(gè)。

點(diǎn)擊綠色區(qū)域

因?yàn)榫G色區(qū)域是三個(gè)顏色區(qū)域最外層區(qū)域，其子元素的取消事件冒泡對(duì)自己沒(méi)有影響，再者其父元素沒(méi)有做任何事件監(jiān)聽(tīng)，故輸出的值僅僅是其自身事件觸發(fā)得到。

3.綠色區(qū)域停止傳播

分別點(diǎn)擊綠色區(qū)域，藍(lán)色區(qū)域，紅色區(qū)域：

得到的效果和沒(méi)有做停止事件在DOM層中的傳播是一樣的，因?yàn)榫G色區(qū)域是三個(gè)顏色區(qū)域最外層區(qū)域，其做取消事件冒泡，其子元素的事件冒泡對(duì)此沒(méi)有影響，再者其父元素沒(méi)有做任何事件監(jiān)聽(tīng)，故輸出的值和沒(méi)有做停止事件在DOM層中的傳播。

事件捕獲

事件捕獲是不太具體的節(jié)點(diǎn)應(yīng)該更早接受到事件，而具體的節(jié)點(diǎn)應(yīng)該最后接受到事件。看看下面的圖：

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




    
    
    
    Document
    


     外部盒
        inner
            box3

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

分別點(diǎn)擊綠色區(qū)域、藍(lán)色區(qū)域、紅色區(qū)域時(shí)執(zhí)行順序：

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

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

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

點(diǎn)擊綠色區(qū)域

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

點(diǎn)擊藍(lán)色區(qū)域

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

點(diǎn)擊紅色區(qū)域

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

事件流

“DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。首先發(fā)生的是事件捕獲階段，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收事件。最后一個(gè)階段是冒泡階段，可以在這個(gè)階段對(duì)事件做出響應(yīng)。

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

分別點(diǎn)擊綠色區(qū)域、藍(lán)色區(qū)域、紅色區(qū)域

具體原因就在過(guò)多的去解釋了，這個(gè)就留給大家思考，清楚的的理解事件流機(jī)制就能很快的得出答案。
何處調(diào)用事件處理程序，何時(shí)在冒泡階段調(diào)用事件處理程序，何時(shí)在捕獲階段調(diào)用事件處理程序。

結(jié)束

終于寫完了！