DOM事件模型淺析

rubyshen 發(fā)布于2019-08-23 12:26 / 1577人閱讀

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

1.何為DOM

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

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

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

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

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

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

3.DOM事件模型

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




    
    DOM Event Model

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

core
inner2
outer

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

left: 50px;

改為

left: -250px;

此時(shí)觀察頁(yè)面我們會(huì)發(fā)現(xiàn)，盡量core是inner2的子節(jié)點(diǎn)，但由于我們定義了“怪異”的樣式，它跑到了inner1里面。現(xiàn)在我們?cè)俅斡檬髽?biāo)點(diǎn)擊core，觀察控制臺(tái)的輸出：

core
inner2
outer

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