這篇文章主要詳細(xì)介紹了DOM中的事件流，包括冒泡型事件、事件監(jiān)聽(tīng)、標(biāo)準(zhǔn)DOM事件監(jiān)聽(tīng)這三個(gè)方面，十分詳細(xì)，推薦給大家。
1.冒泡型事件
瀏覽器的事件模型分兩種：捕獲型事件和冒泡型事件。由于ie不支持捕獲型事件，所以以下主要以冒泡型事件作為講解。
（dubbed bubbling）冒泡型指事件安裝最特定的事件到最不特定的事件逐一觸發(fā)。
代碼如下:
<body onclick="add('body<br>')">
<div onclick="add('div<br>')">
<ponclick="add('p<br>')"> click me</p>
</div>
</body>
<div id="display">
</div>
<script type="text/javascript">
function add(sText) {
var ulo = document.getElementById("display");
ulo.innerHTML += sText;
}
</script>
以上三個(gè)函數(shù)都添加了onclick函數(shù)，單機(jī)p元素后三個(gè)函數(shù)都觸發(fā)，先執(zhí)行了p元素，再執(zhí)行了div，最后執(zhí)行了body
這這里順便提醒下捕獲型事件，它的順序正好和冒泡型事件相反。
2.事件監(jiān)聽(tīng)
一個(gè)事件都需要函數(shù)來(lái)響應(yīng)，這類(lèi)函數(shù)通常稱(chēng)為事件處理函數(shù)（enent handler），從另外一個(gè)角度看，這些函數(shù)都在實(shí)時(shí)監(jiān)聽(tīng)著是否有事件發(fā)生，通常稱(chēng)為事件監(jiān)聽(tīng)函數(shù)(enevt listener),事件監(jiān)聽(tīng)函數(shù)對(duì)于不同的瀏覽器區(qū)別較大。
i.通用監(jiān)聽(tīng)方法，比如使用onclick方法，幾乎每個(gè)標(biāo)簽都支持此方法。而且瀏覽器兼容性都很高
考慮到行為，事件分離。
一般使用使用以下方式進(jìn)行監(jiān)聽(tīng)
代碼如下:
<body>
<div id="me">click</div>
<script type="text/javascript">
var opp = document.getElementById("me"); //找到事件
opp.onclick = function(){ //設(shè)置事件函數(shù)
alert("我被點(diǎn)擊了！")
}
</script>
</body>
以上介紹的兩者方法都十分便捷，在制作處理一些小功能時(shí)都被光大開(kāi)發(fā)者所喜愛(ài)。但對(duì)于同一個(gè)事件。他們都只能添加一個(gè)函數(shù)，列如對(duì)于p標(biāo)記的onclick函數(shù)，利用這兩種方法都只能有一個(gè)函數(shù)，因此，ie有自己的解決辦法，同事，標(biāo)準(zhǔn)的dom則規(guī)定了另外一種方法。
ii.IE中的監(jiān)聽(tīng)方法
早ie瀏覽器中，每個(gè)元素都有兩個(gè)方法來(lái)處理時(shí)間的監(jiān)聽(tīng)。
分別是attachEvent()和detachEnevt()。
從它們的函數(shù)名稱(chēng)就能看出來(lái)，attachEnevt()是用來(lái)給某個(gè)元素添加事件處理的函數(shù)，而detachEvent()則是用來(lái)刪除元素上的監(jiān)聽(tīng)函數(shù)。它們的語(yǔ)法如下：
[object].attachEvent("enevt_handler","fnHandler");
[object].detachEvent("enevt_handler","fnHandler");
其中enevt_handler代表常用的onclick , onload, onmouseover等
fnHandler是監(jiān)聽(tīng)函數(shù)的名稱(chēng)。
上一節(jié)事件中可以使用attachEvent()方法替代添加監(jiān)聽(tīng)函數(shù)，當(dāng)單擊了一下，可以使用detachEvent()刪除監(jiān)聽(tīng)函數(shù)，使其下次單擊后再不執(zhí)行。
代碼如下:
<script type="text/javascript">
function fnclick() {
alert("我被點(diǎn)擊了！");
oP.detachEvent("onclick","fnclick");
}
var oP;
window.onload = function() {
oP = document.getElementById("oop"); //找到對(duì)象
oP.attachEvent("onclick","fnclick"); //添加監(jiān)聽(tīng)函數(shù)
}
</script>
<div>
<p id="oop">
</p>
</div>
iii.添加多個(gè)監(jiān)聽(tīng)事件（ie）
代碼如下:
<script language="javascript">
function fnClick1(){
alert("我被fnClick1點(diǎn)擊了");
}
function fnClick2(){
alert("我被fnClick2點(diǎn)擊了");
//oP.detachEvent("onclick",fnClick1); //刪除監(jiān)聽(tīng)函數(shù)1
}
var oP;
window.onload = function(){
oP = document.getElementById("myP"); //找到對(duì)象
oP.attachEvent("onclick",fnClick1); //添加監(jiān)聽(tīng)函數(shù)1
oP.attachEvent("onclick",fnClick2); //添加監(jiān)聽(tīng)函數(shù)2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
3.標(biāo)準(zhǔn)DOM事件監(jiān)聽(tīng)
與ie的兩個(gè)方法對(duì)于，標(biāo)準(zhǔn)DOM也使用兩個(gè)方法分別添加和刪除監(jiān)聽(tīng)函數(shù)。即addEventListener()，和removeEventListener()
與ie不同，這兩個(gè)函數(shù)接受3個(gè)參數(shù)，即事件的名稱(chēng)，要分配的函數(shù)名和是用于冒泡階段還是捕獲階段。捕獲階段的參數(shù)為true，冒泡階段參數(shù)為false.語(yǔ)法如下：
代碼如下:
[object].addEventListener("event_name",fnHandler,bCapture);
[object].removeEventListener("event_name",fnHandler,bCapture);
這兩個(gè)函數(shù)的使用方法和ie基本類(lèi)似，只不過(guò)要注意，event_name的名稱(chēng)是“click”，“mouseover”等，而不是Ie中的“onclick”，“onmouseover”。
另外第三個(gè)參數(shù)bCapture通常設(shè)置為false，冒泡階段。
標(biāo)準(zhǔn)dom的事件監(jiān)聽(tīng)方法：
代碼如下:
<script language="javascript">
function fnClick1() {
alert("我被點(diǎn)擊了1");
oP.removeEventListener("click", fnClick1, false);
}
function fnClick2() {
alert("我被點(diǎn)擊了2");
}
window.onload = function() {
oP = document.getElementById("myP");
oP.addEventListener("click", fnClick1, false);
oP.addEventListener("click", fnClick2, false);
}
</script>
<div>
<p id="myP">Click Me</p>
</div>
具體的執(zhí)行順序大家可測(cè)試。
以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：