DOM事件模型淺析

banana_pi 發(fā)布于2019-08-02 11:46 / 2243人閱讀

摘要：事件發(fā)生后，對象可能會作出響應(yīng)，也有可能無動(dòng)于衷。事件模型在講解事件模型前，再用一個(gè)例子作為引入。當(dāng)一個(gè)事件發(fā)生時(shí)，事件會在樹中進(jìn)行傳播。冒泡階段在此階段，事件從事件源開始向上傳播，直到根結(jié)點(diǎn)。

1.何為DOM

DOM是“Document Object Model”的縮寫，中文譯為“文檔對象模型”。它是一種跨平臺、跨語言的編程接口，將HTML，XHTML，XML文檔映射成樹形結(jié)構(gòu)，樹的每一個(gè)節(jié)點(diǎn)都是一個(gè)對象。正因如此，面向?qū)ο蟮木幊陶Z言（如javascript）可以通過DOM對HTML，XHTML，XML文檔進(jìn)行操作。對于HTML文檔來說，它的根結(jié)點(diǎn)為document對象，HTML元素為element對象，HTML元素的屬性為attr對象。

2.何為DOM事件及如何對其作出響應(yīng)

在瀏覽網(wǎng)頁時(shí)，我們常常需要頁面對用戶的操作作出響應(yīng)，比如點(diǎn)擊“閱讀全文”后我們期望頁面展示被折疊的文本，按下回車鍵后瀏覽器提交已填好的表單。用戶的各種操作都是“事件”。事件都是在對象上發(fā)生的，可能是DOM對象、BOM對象，等等。事件發(fā)生后，對象可能會作出響應(yīng)，也有可能“無動(dòng)于衷”。我們希望DOM元素對事件作出響應(yīng)，一般而言有兩種方法：
i.事件屬性
事件屬性是一種特殊的屬性，它的值規(guī)定了對應(yīng)事件發(fā)生時(shí)需要執(zhí)行的javascript腳本。例：

上面為button標(biāo)簽添加了事件屬性onclick，其值為"console.log("button clicked!")"，它規(guī)定了當(dāng)元素被鼠標(biāo)點(diǎn)擊時(shí)，控制臺輸出"button clicked"。
ii.addEventListener()方法
EventTarget.addEventListener()方法將指定的監(jiān)聽器注冊到EventTarget上，當(dāng)該對象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會被執(zhí)行。EventTarget可以是element對象,document對象或者任何其他支持事件的對象。例：

//腳本中
var mybutton=document.getElementById("mybutton");
mybutton.addEventListener("click",function(e){console.log("button clicked!");});

上例為button元素注冊了click事件的監(jiān)聽器，并規(guī)定事件時(shí)觸發(fā)控制臺輸出"button clicked"。

3.DOM事件模型

在講解DOM事件模型前，再用一個(gè)例子作為引入。請看下面的html文件：




    
    DOM Event Model

這里為id分別為outer,inner1,inner2,core的4個(gè)元素定義了事件屬性，元素被點(diǎn)擊后將在控制臺輸出它的id。現(xiàn)在問題來了：
如果我點(diǎn)擊core元素，控制臺將會輸出什么？
點(diǎn)擊core元素時(shí)，由于core元素包含在inner2元素里，inner2元素同樣被點(diǎn)擊了;同理，inner2元素包含在outer元素里，那么outer元素也被點(diǎn)擊了。這種情況下哪一個(gè)元素的click事件將會被觸發(fā),或者說三者都被觸發(fā)？如果說三者都被觸發(fā)，那么又是以怎樣的順序被觸發(fā)？
我在火狐瀏覽器做了一次實(shí)驗(yàn)，控制臺輸出結(jié)果如下：

core
inner2
outer

也就是說，三者的事件都被觸發(fā)了，且是“由內(nèi)向外”觸發(fā)的。
下面我們再做一個(gè)有趣的實(shí)驗(yàn)：我們將上面的html文件再做一個(gè)小小的改動(dòng)，將core元素的樣式

left: 50px;

改為

left: -250px;

此時(shí)觀察頁面我們會發(fā)現(xiàn)，盡量core是inner2的子節(jié)點(diǎn)，但由于我們定義了“怪異”的樣式，它跑到了inner1里面。現(xiàn)在我們再次用鼠標(biāo)點(diǎn)擊core，觀察控制臺的輸出：

core
inner2
outer

和剛才的結(jié)果一模一樣！盡管表面上inner1似乎被點(diǎn)擊了，但它的click事件并沒有觸發(fā);反而是看似未被點(diǎn)擊的inner2元素的click事件被觸發(fā)了。仿佛core元素的click事件被觸發(fā)后，click事件一層一層向上“傳播”給了父節(jié)點(diǎn)。
為了解釋剛才的實(shí)驗(yàn)結(jié)果，是時(shí)候開始講解DOM事件模型了。
當(dāng)一個(gè)事件發(fā)生時(shí)，事件會在DOM樹中進(jìn)行傳播。傳播分為兩個(gè)階段：
i.捕獲階段
在此階段，事件從根結(jié)點(diǎn)（即document結(jié)點(diǎn)）開始向下傳播，直到事件源所在元素。
ii.冒泡階段
在此階段，事件從事件源開始向上傳播，直到根結(jié)點(diǎn)。
拿剛才的例子來說，事件傳播的順序?yàn)椋?br>document捕獲->html捕獲->body捕獲->outer捕獲->inner2捕獲->core捕獲->core冒泡->inner2冒泡->outer冒泡->html冒泡->document冒泡
對于事件屬性，默認(rèn)在冒泡階段觸發(fā)事件。如果用addEventListener()方法注冊監(jiān)聽器，則可以指定在捕獲階段還是冒泡階段觸發(fā)事件：如果最后一個(gè)參數(shù)為false（默認(rèn)值），則在冒泡階段觸發(fā)事件;如果為true，則在捕獲階段觸發(fā)事件。
一般來說，我們推薦采用addEventListener()方法來注冊監(jiān)聽器，而盡量不用事件屬性。因?yàn)槭录傩圆焕谛袨榕c結(jié)構(gòu)的分離，使代碼難以維護(hù)。