DOM事件模型
在0級(jí)DOM事件模型中，它只是簡(jiǎn)單的執(zhí)行你為它綁定的事件，比如你為某個(gè)元素添加了一個(gè)onclick事件，當(dāng)事件觸發(fā)時(shí)，它只是去調(diào)用我們綁定的那個(gè)方法，不再做其他的操作。
在2級(jí)DOM事件模型中，就比較復(fù)雜一些，它將不再是單純的調(diào)用一下自身綁定的事件就完事了，它還擁有機(jī)會(huì)去處理它的祖先節(jié)點(diǎn)，在DOM2級(jí)事件模型中，它有一個(gè)事件傳播過(guò)程，分為3個(gè)階段，從“事件捕獲”Document開始來(lái)到“目標(biāo)節(jié)點(diǎn)”再?gòu)摹澳繕?biāo)節(jié)點(diǎn)”冒泡回Document對(duì)象，舉段代碼
<div id="div">
<a href="javascript:;">DOM事件模型</a>
</div>
<script>
var div = document.getElementById("div"); var a = div.children[0]; document.onclick = function(){ console.log("document");
};
a.onclick = function(){ console.log("a");
};
div.onclick = function(){ console.log("div");
}; </script>
可以看到我只是點(diǎn)擊了a元素，但是div和document綁定的事件也被觸發(fā)了，這就是DOM2級(jí)和1級(jí)的區(qū)別，同時(shí)你也看到，它是先輸出的a，而不是div和document，雖然說(shuō)它有3個(gè)階段，但瀏覽器默認(rèn)是在冒泡階段才執(zhí)行的，如果不這樣的話，我們點(diǎn)擊a元素就會(huì)執(zhí)行多次啦。
如果你想讓瀏覽器在捕獲階段執(zhí)行，那么就不能直接使用onclick添加事件了，而是要使用addEventListener添加事件，它的第三個(gè)參數(shù)就是用來(lái)設(shè)置在哪個(gè)階段執(zhí)行，具體可以看
網(wǎng)友評(píng)論
