1.干預(yù)系統(tǒng)的事件處理機(jī)制
(一)DOM事件流
DOM模型是一個樹形結(jié)構(gòu),在DOM模型中,HTML元素是有層次的。當(dāng)一個HTML元素上產(chǎn)生一個事件時,該事件會在DOM樹中元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按特定的順序傳播,路徑所經(jīng)過的節(jié)點(diǎn)都會收到該事件,這個傳播過程就是DOM事件流。
DOM事件標(biāo)準(zhǔn)定義了兩種事件流,分別是捕獲事件和冒泡事件。
1.冒泡事件流
默認(rèn)情況下,事件使用冒泡事件流。當(dāng)事件(例如單擊事件)在某一DOM元素上被觸發(fā)時,事件將沿著該節(jié)點(diǎn)的各個父結(jié)點(diǎn)冒泡穿過整個DOM節(jié)點(diǎn)層次。在冒泡過程中的任何時候都可以終止事件的冒泡。如果不停止事件的傳播,事件將一直通過DOM冒泡直至到達(dá)文檔根。
2.捕獲事件流
于冒泡模型相反,在捕獲事件流模型中,事件的處理將從DOM層次的根開始,而不是從觸發(fā)事件的目標(biāo)元素開始,事件被從目標(biāo)元素的所有所有祖先元素依次往下傳遞。在這個過程中,事件會被從文檔的根到事件目標(biāo)元素之間各個繼承派生的元素所捕獲。
3.DOM標(biāo)準(zhǔn)的事件模型
DOM標(biāo)準(zhǔn)同時支持捕獲事件模型和冒泡事件模型,但是,捕獲事件模型先發(fā)生。兩種事件流都會觸發(fā)DOM中的所有對象,從document對象開始,也在document對象結(jié)束。
4.事件傳導(dǎo)的3個階段
(1)事件捕捉(Capturing)階段:事件將沿著DOM樹向下傳送,經(jīng)過目標(biāo)節(jié)點(diǎn)的每一個祖先節(jié)點(diǎn),直至目標(biāo)節(jié)點(diǎn)。例如,用戶單擊了一個超鏈接,則該單擊事件將從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)聽器后,就會運(yùn)行該監(jiān)聽器。
(3)冒泡(Bubbling)階段:事件將沿著DOM樹向上轉(zhuǎn)送,再次逐個訪問目標(biāo)元素的祖先節(jié)點(diǎn)直到document節(jié)點(diǎn)。該過程中的每一步,瀏覽器都將檢測那些不是捕捉事件監(jiān)聽器的事件監(jiān)聽器并執(zhí)行它們。(即:與觸發(fā)事件無關(guān)的事件監(jiān)聽器也由于冒泡將被執(zhí)行)。
二)停止事件冒泡
當(dāng)事件(例如單擊事件)在某一DOM元素上被觸發(fā)時,事件將沿著該節(jié)點(diǎn)的各個父節(jié)點(diǎn)冒泡穿過整個DOM節(jié)點(diǎn)層次,直到遇到依附有該事件類型處理器的節(jié)點(diǎn)。
(三)阻止事件的默認(rèn)行為
事件的默認(rèn)行為是指瀏覽器在事件傳遞和處理完成后自動執(zhí)行的與該事件關(guān)聯(lián)的默認(rèn)動作。例如,單擊一個超鏈接的默認(rèn)行為是訪問其定義的url。
IE和其他瀏覽器阻止事件的默認(rèn)行為的方法不同。在IE中,可以通過設(shè)置event對象的returnValue屬性為false來阻止事件的默認(rèn)行為;在其他瀏覽器中,則可以通過設(shè)置event對象的preventDefault()方法來實(shí)現(xiàn)。