冒泡事件的捕獲

1.干預(yù)系統(tǒng)的事件處理機(jī)制
(一)DOM事件流

DOM模型是一個(gè)樹形結(jié)構(gòu),在DOM模型中,HTML元素是有層次的。當(dāng)一個(gè)HTML元素上產(chǎn)生一個(gè)事件時(shí),該事件會(huì)在DOM樹中元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按特定的順序傳播,路徑所經(jīng)過的節(jié)點(diǎn)都會(huì)收到該事件,這個(gè)傳播過程就是DOM事件流。

DOM事件標(biāo)準(zhǔn)定義了兩種事件流,分別是捕獲事件和冒泡事件。

1.冒泡事件流

默認(rèn)情況下,事件使用冒泡事件流。當(dāng)事件(例如單擊事件)在某一DOM元素上被觸發(fā)時(shí),事件將沿著該節(jié)點(diǎn)的各個(gè)父結(jié)點(diǎn)冒泡穿過整個(gè)DOM節(jié)點(diǎn)層次。在冒泡過程中的任何時(shí)候都可以終止事件的冒泡。如果不停止事件的傳播,事件將一直通過DOM冒泡直至到達(dá)文檔根。
2.捕獲事件流

于冒泡模型相反,在捕獲事件流模型中,事件的處理將從DOM層次的根開始,而不是從觸發(fā)事件的目標(biāo)元素開始,事件被從目標(biāo)元素的所有所有祖先元素依次往下傳遞。在這個(gè)過程中,事件會(huì)被從文檔的根到事件目標(biāo)元素之間各個(gè)繼承派生的元素所捕獲。
3.DOM標(biāo)準(zhǔn)的事件模型

DOM標(biāo)準(zhǔn)同時(shí)支持捕獲事件模型和冒泡事件模型,但是,捕獲事件模型先發(fā)生。兩種事件流都會(huì)觸發(fā)DOM中的所有對象,從document對象開始,也在document對象結(jié)束。
4.事件傳導(dǎo)的3個(gè)階段

(1)事件捕捉(Capturing)階段:事件將沿著DOM樹向下傳送,經(jīng)過目標(biāo)節(jié)點(diǎn)的每一個(gè)祖先節(jié)點(diǎn),直至目標(biāo)節(jié)點(diǎn)。例如,用戶單擊了一個(gè)超鏈接,則該單擊事件將從document節(jié)點(diǎn)轉(zhuǎn)送到html元素、body元素以及包含該鏈接的p元素。目標(biāo)節(jié)點(diǎn)就是觸發(fā)事件的DOM節(jié)點(diǎn)。

(2)目標(biāo)(target)階段:在此階段中,事件傳導(dǎo)到目標(biāo)節(jié)點(diǎn)。瀏覽器在查找到已經(jīng)指定給目標(biāo)事件的監(jiān)聽器后,就會(huì)運(yùn)行該監(jiān)聽器。

(3)冒泡(Bubbling)階段:事件將沿著DOM樹向上轉(zhuǎn)送,再次逐個(gè)訪問目標(biāo)元素的祖先節(jié)點(diǎn)直到document節(jié)點(diǎn)。該過程中的每一步,瀏覽器都將檢測那些不是捕捉事件監(jiān)聽器的事件監(jiān)聽器并執(zhí)行它們。(即:與觸發(fā)事件無關(guān)的事件監(jiān)聽器也由于冒泡將被執(zhí)行)。
二)停止事件冒泡

當(dāng)事件(例如單擊事件)在某一DOM元素上被觸發(fā)時(shí),事件將沿著該節(jié)點(diǎn)的各個(gè)父節(jié)點(diǎn)冒泡穿過整個(gè)DOM節(jié)點(diǎn)層次,直到遇到依附有該事件類型處理器的節(jié)點(diǎn)。
(三)阻止事件的默認(rèn)行為

事件的默認(rèn)行為是指瀏覽器在事件傳遞和處理完成后自動(dòng)執(zhí)行的與該事件關(guān)聯(lián)的默認(rèn)動(dòng)作。例如,單擊一個(gè)超鏈接的默認(rèn)行為是訪問其定義的url。

IE和其他瀏覽器阻止事件的默認(rèn)行為的方法不同。在IE中,可以通過設(shè)置event對象的returnValue屬性為false來阻止事件的默認(rèn)行為;在其他瀏覽器中,則可以通過設(shè)置event對象的preventDefault()方法來實(shí)現(xiàn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,701評論 1 11
  • 1.干預(yù)系統(tǒng)的事件處理機(jī)制(一)DOM事件流 DOM模型是一個(gè)樹形結(jié)構(gòu),在DOM模型中,HTML元素是有層次的。當(dāng)...
    isMyNickName閱讀 540評論 0 0
  • js之事件機(jī)制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驅(qū)動(dòng)...
    道無虛閱讀 2,632評論 0 2
  • 事件流 JavaScript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互...
    DHFE閱讀 914評論 0 3
  • 以下文章為轉(zhuǎn)載,對理解JavaScript中的事件處理機(jī)制很有幫助,淺顯易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy閱讀 3,173評論 1 10

友情鏈接更多精彩內(nèi)容