資訊專欄INFORMATION COLUMN
摘要：那么哪個(gè)先彈呢由于此時(shí)事件處于第二階段，即處于目標(biāo)階段，彈出順序取決的也不再是捕獲或冒泡，而是誰在代碼中先注冊，因此，在這段代碼中，彈出的是捕獲冒泡。
這是本人的第一篇文章，歡迎大家多多批評指正！
DOM2級事件中addEventListener的執(zhí)行機(jī)制，多個(gè)addEventListener同時(shí)添加時(shí)的執(zhí)行先后規(guī)律：
W3C的DOM事件觸發(fā)分為三個(gè)階段：
1.事件捕獲階段：即由最頂層元素（一般是從window元素開始，有的瀏覽器是從document開始，至于其中的差別我稍后會更新）開始，逐次進(jìn)入dom內(nèi)部，最后到達(dá)目標(biāo)元素，依次執(zhí)行綁定在其上的事件；
2.處于目標(biāo)階段：檢測機(jī)制到達(dá)目標(biāo)元素，按事件注冊順序執(zhí)行綁定在目標(biāo)元素上的事件；
3.事件冒泡階段：從目標(biāo)元素出發(fā)，向外層元素冒泡，最后到達(dá)頂層（window或document），依次執(zhí)行綁定再其上的事件。
在addEventListener中，利用第三個(gè)參數(shù)控制其是從哪個(gè)階段開始，“true”是從捕獲階段開始，而“false”則是跳過捕獲階段，從冒泡階段開始。
下面是一個(gè)簡單的例子：
事件流
在這個(gè)例子里，如果我們點(diǎn)擊內(nèi)層元素inner,那么處于捕獲階段的“outer捕獲”最先彈出，接下來是目標(biāo)元素"inner捕獲"彈出，最后是處于冒泡階段的"outer冒泡"彈出，即：“outer捕獲”-->"inner捕獲"-->"outer冒泡"。 即使在代碼里變換三個(gè)綁定事件的順序，只要點(diǎn)擊的是inner,這個(gè)執(zhí)行順序就不會變。
那么問題來了，如果我們點(diǎn)擊的是外層outer的話呢？
要明白這個(gè)問題，我們必須明確一點(diǎn)：目標(biāo)事件在哪一層，事件流就在哪一層回流，即使在outer事件下還有許多子孫節(jié)點(diǎn)，事件流都不會在outer之后往內(nèi)流，此時(shí)，inner上的事件不會被觸發(fā)，因此在這段代碼中，只會彈出“outer捕獲”和"outer冒泡"。
那么哪個(gè)先彈呢？由于此時(shí)事件處于第二階段，即“處于目標(biāo)階段”，彈出順序取決的也不再是捕獲或冒泡，而是誰在代碼中先注冊，因此，在這段代碼中，彈出的是：“outer捕獲”→"outer冒泡"。
綜上所述，事件在DOM中的執(zhí)行順序?yàn)椋和鈱硬东@事件→內(nèi)層捕獲事件→先注冊的目標(biāo)事件→后注冊的目標(biāo)事件→內(nèi)層冒泡事件→外層冒泡事件
讓我們加深理解，看下面這個(gè)例子：
事件流
在這段代碼里，點(diǎn)擊inner，box上的捕獲事件最先執(zhí)行，然后是outer上的捕獲事件，然后是inner上先注冊的事件，然后是inner上后注冊的事件，最后是box上的冒泡事件 彈出順序?yàn)椋?oBox捕獲"→"outer捕獲"→"inner冒泡"→"inner捕獲"→"outer冒泡"→"oBox冒泡"。
補(bǔ)充一點(diǎn)，在ie8-中，由于addEventLister不起作用，我們使用attachEvent方法來綁定事件，此時(shí)在第二階段，也就是處于目標(biāo)階段，如果目標(biāo)元素上綁定了兩個(gè)事件，那么其執(zhí)行順序和addEventLister相反：誰后注冊誰先執(zhí)行。
如果dom0級事件和dom2級事件同時(shí)存在，那執(zhí)行順序會是怎樣呢？
事件流
上面的例子中，我將outer的div在捕獲階段和冒泡階段都綁定了點(diǎn)擊事件，同時(shí)還在綁定了dom0級的點(diǎn)擊事件處理函數(shù)，這時(shí)如果我們點(diǎn)擊inner，我們會發(fā)現(xiàn)，事件的執(zhí)行順序是這樣的oBox-Dom2捕獲--> outer-Dom2捕獲 --> inner-Dom2冒泡 --> inner-Dom2捕獲 -->outer-dom0 click!-->outer-Dom2冒泡 --> oBox-Dom2冒泡。
由此我們可以得出一個(gè)結(jié)論：當(dāng)綁定dom0級事件元素不是目標(biāo)元素時(shí)，那么綁定dom0級事件的處理是在冒泡階段處理并按事件注冊的先后順序執(zhí)行（W3C先注冊的先執(zhí)行) ,如果綁定dom0級事件的元素是目標(biāo)元素時(shí)，則不論是捕獲階段綁定的處理函數(shù)還是冒泡階段綁定的處理函數(shù)以及dom0級事件處理函數(shù)，他們的執(zhí)行順序都是按照注冊的順序執(zhí)行（W3C先注冊的先執(zhí)行) 。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83110.html
摘要：事件流指的是從頁面接收事件的順序。級事件規(guī)定方法的第三個(gè)參數(shù)設(shè)為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級事件規(guī)定，事件流應(yīng)該包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。 什么是事件？（敲黑板） 事件，就是文檔或?yàn)g覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級程序設(shè)計(jì)》）比如鼠標(biāo)點(diǎn)擊，雙擊，滾動(dòng)條滑動(dòng)... 什么是事件...
摘要：與之間的交互是通過事件實(shí)現(xiàn)的。而，則將事件一直冒泡到對象。事件處理程序的名字以開頭，例如。級事件處理程序通過指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?。變?dòng)事件在結(jié)構(gòu)發(fā)生變化時(shí)觸發(fā)，比如插入或者刪除節(jié)點(diǎn)。 javascript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件就是文檔或者瀏覽器中發(fā)生的一些特定的交互瞬間。 事件流 事件流描述的是頁面接受事件的順序，而I...
摘要：與之間的交互是通過事件實(shí)現(xiàn)的。而，則將事件一直冒泡到對象。事件處理程序的名字以開頭，例如。級事件處理程序通過指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?。變?dòng)事件在結(jié)構(gòu)發(fā)生變化時(shí)觸發(fā)，比如插入或者刪除節(jié)點(diǎn)。 javascript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件就是文檔或者瀏覽器中發(fā)生的一些特定的交互瞬間。 事件流 事件流描述的是頁面接受事件的順序，而I...
摘要：事件流級事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認(rèn)為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時(shí)由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)。如： ...
閱讀 2958·2023-04-25 22:16
閱讀 2125·2021-10-11 11:11
閱讀 3258·2019-08-29 13:26
閱讀 602·2019-08-29 12:32
閱讀 3422·2019-08-26 11:49
閱讀 3001·2019-08-26 10:30
閱讀 1952·2019-08-23 17:59
閱讀 1518·2019-08-23 17:57
