資訊專欄INFORMATION COLUMN
摘要：事件冒泡階段，從目標(biāo)元素出發(fā)，向外層元素冒泡，最后到達(dá)頂層或，依次執(zhí)行綁定再其上的事件。在中，利用第三個(gè)參數(shù)控制其是從哪個(gè)階段開始，是從捕獲階段開始，而則是跳過捕獲階段，從冒泡階段開始。
花一天時(shí)間研究完了DOM2級(jí)事件中addEventListener的執(zhí)行機(jī)制，作為開山第一帖，和大家講講多個(gè)addEventListener同時(shí)添加時(shí)的執(zhí)行先后規(guī)律：
如圖，大家都知道，W3c的DOM事件觸發(fā)分為三個(gè)階段：
①、事件捕獲階段，即由最頂層元素（一般是從window元素開始，有的瀏覽器是從document開始，至于其中的差別我稍后會(huì)更新）開始，逐次進(jìn)入dom內(nèi)部，最后到達(dá)目標(biāo)元素，依次執(zhí)行綁定在其上的事件
②、處于目標(biāo)階段，檢測(cè)機(jī)制到達(dá)目標(biāo)元素，按事件注冊(cè)順序執(zhí)行綁定在目標(biāo)元素上的事件。
③、事件冒泡階段，從目標(biāo)元素出發(fā)，向外層元素冒泡，最后到達(dá)頂層（window或document），依次執(zhí)行綁定再其上的事件。
在addEventListener中，利用第三個(gè)參數(shù)控制其是從哪個(gè)階段開始，“true”是從捕獲階段開始，而“false”則是跳過捕獲階段，從冒泡階段開始。
看一個(gè)簡(jiǎn)單的例子：
在這個(gè)例子里，如果我們點(diǎn)擊內(nèi)層元素inner,那么處于捕獲階段的1最先彈出，接下來是目標(biāo)元素2彈出，最后是處于冒泡階段的3彈出，即：1，2，3.
即使在代碼里變換三個(gè)綁定事件的順序，只要點(diǎn)擊的是inner,這個(gè)執(zhí)行順序就不會(huì)變。
那么問題來了，如果點(diǎn)擊的是外層outer的話呢？
要明白這個(gè)問題，我們必須明確一點(diǎn)：目標(biāo)事件在哪一層，事件流就在哪一層回流，即使在outer事件下還有許多子孫節(jié)點(diǎn)，事件流都不會(huì)在outer之后往內(nèi)流，此時(shí)，inner上的事件不會(huì)被觸發(fā)，因此在這段代碼中，只會(huì)彈出1和3。
那么這兩個(gè)數(shù)字哪個(gè)先彈呢？由于此時(shí)事件處于第二階段，即“處于目標(biāo)階段”，彈出順序取決的也不再是捕獲或冒泡，而是誰在代碼中先注冊(cè)，因此，在這段代碼中，彈出的是：1→3.
綜上所述，事件在DOM中的執(zhí)行順序?yàn)椋和鈱硬东@事件→內(nèi)層捕獲事件→先注冊(cè)的目標(biāo)事件→后注冊(cè)的目標(biāo)事件→內(nèi)層冒泡事件→外層冒泡事件
讓我們?cè)倏磦€(gè)例子來加深這個(gè)概念：
在這段代碼里，box上的捕獲事件最先執(zhí)行，然后是outer上的捕獲事件，然后是inner上先注冊(cè)的事件，然后是inner上后注冊(cè)的事件，最后是box上的冒泡事件
彈出順序?yàn)椋?→2→3.2→3.1→4
補(bǔ)充一點(diǎn)，在ie8-中，由于addEventLister不起作用，我們使用attachEvent方法來綁定事件，此時(shí)在第二階段，也就是處于目標(biāo)階段，如果目標(biāo)元素上綁定了兩個(gè)事件，那么其執(zhí)行順序和addEventLister相反：誰后注冊(cè)誰先執(zhí)行。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79726.html
摘要：而由于級(jí)標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以事件級(jí)別只包括級(jí)，級(jí)和級(jí)三種。此屬性返回當(dāng)前事件所綁定的對(duì)象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。 前端學(xué)習(xí)的東西有很多，現(xiàn)代前端開發(fā)，前端工程化的東西要懂，基礎(chǔ)的原生js也要懂，畢竟，框架都是有生命周期的，更替非?？?，然而卻有這么一個(gè)框架，它是最輕量的前端框架，每個(gè)瀏覽器都內(nèi)置，它叫vanilla.js。好吧，其實(shí)va...
摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對(duì)不同級(jí)別的，我們的事件處理方式也是不一樣的。當(dāng)然其優(yōu)點(diǎn)是不需要操作來完成事件的綁定。文章地址事件深入淺出二。 在項(xiàng)目開發(fā)時(shí)，我們時(shí)常需要考慮用戶在使用產(chǎn)品時(shí)產(chǎn)生的各種各樣的交互事件，比如鼠標(biāo)點(diǎn)擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會(huì)有不同的觸發(fā)條件和觸發(fā)效果。本文就將帶大家深入淺出地了解...
摘要：事件流指的是從頁(yè)面接收事件的順序。級(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)... 什么是事件...
摘要：當(dāng)用戶選擇文本框或中的一個(gè)或多個(gè)字符觸發(fā)。當(dāng)文本框或內(nèi)容改變且失去焦點(diǎn)后觸發(fā)。事件對(duì)象事件對(duì)象就是對(duì)象，通過處理函數(shù)傳遞。比如右擊文本框輸入?yún)^(qū)域，會(huì)彈出系統(tǒng)菜單點(diǎn)擊超鏈接會(huì)跳轉(zhuǎn)到指定頁(yè)面點(diǎn)擊提交按鈕會(huì)提交數(shù)據(jù)。 前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：Event JavaScript-事件even...
摘要：與之間的交互是通過事件實(shí)現(xiàn)的。而，則將事件一直冒泡到對(duì)象。事件處理程序的名字以開頭，例如。級(jí)事件處理程序通過指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?。變?dòng)事件在結(jié)構(gòu)發(fā)生變化時(shí)觸發(fā)，比如插入或者刪除節(jié)點(diǎn)。 javascript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件就是文檔或者瀏覽器中發(fā)生的一些特定的交互瞬間。 事件流 事件流描述的是頁(yè)面接受事件的順序，而I...
閱讀 1541·2021-11-24 09:39
閱讀 1846·2021-11-22 15:25
閱讀 3816·2021-11-19 09:40
閱讀 3358·2021-09-22 15:31
閱讀 1373·2021-07-29 13:49
閱讀 1308·2019-08-26 11:59
閱讀 1382·2019-08-26 11:39
閱讀 986·2019-08-26 11:00
