DOM事件模型淺析

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

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

1.何為DOM

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

2.何為DOM事件及如何對其作出響應

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

上面為button標簽添加了事件屬性onclick，其值為"console.log("button clicked!")"，它規(guī)定了當元素被鼠標點擊時，控制臺輸出"button clicked"。
ii.addEventListener()方法
EventTarget.addEventListener()方法將指定的監(jiān)聽器注冊到EventTarget上，當該對象觸發(fā)指定的事件時，指定的回調(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ī)定事件時觸發(fā)控制臺輸出"button clicked"。

3.DOM事件模型

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




    
    DOM Event Model

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

core
inner2
outer

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

left: 50px;

改為

left: -250px;

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

core
inner2
outer

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