在瀏覽器文檔模型DOM中,事件是指因?yàn)槟撤N具體的交互行為發(fā)生，由被作用的元素發(fā)出，再由瀏覽器響應(yīng)的過程。常見的事件有：click，onmouseover，onblur等等。

?

DOM(文檔對象模型)結(jié)構(gòu)是一個(gè)樹型結(jié)構(gòu)，當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會(huì)在元素結(jié)點(diǎn)與根結(jié)點(diǎn)之間的路徑傳播，路徑所經(jīng)過的結(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過程可稱為DOM事件流。

按照DOM事件流的觀點(diǎn)，事件在樹中傳播的方向就有兩個(gè)，一個(gè)是從根結(jié)點(diǎn)向子結(jié)點(diǎn)流動(dòng)，以及子結(jié)點(diǎn)向根結(jié)點(diǎn)傳播的方向。前者是Netscape Navigator對事件流的實(shí)現(xiàn)：捕獲型事件(Capturing)，后者是IE的實(shí)現(xiàn)方式，即冒泡型事件(Bubbling)（下圖作者 小小子 ）。

DOM標(biāo)準(zhǔn)事件模型：

因?yàn)閮蓚€(gè)不同的模型都有其優(yōu)點(diǎn)和解釋，DOM標(biāo)準(zhǔn)支持捕獲型與冒泡型，可以說是它們兩者的結(jié)合體。它可以在一個(gè)DOM元素上綁定多個(gè)事件處理器，并且在處理函數(shù)內(nèi)部，this關(guān)鍵字仍然指向被綁定的DOM元素，另外處理函數(shù)參數(shù)列表的第一個(gè)位置傳遞事件event對象。

首先是捕獲式傳遞事件，接著是冒泡式傳遞，所以，如果一個(gè)處理函數(shù)既注冊了捕獲型事件的監(jiān)聽，又注冊冒泡型事件監(jiān)聽，那么在DOM事件模型中它就會(huì)被調(diào)用兩次。

在注冊事件時(shí)主要有三種方法：

1.HTML掛載法。

    <div onclick=”alert(this.innerHTML);”>內(nèi)容<div>
  

?

這是很普遍的做法，主要優(yōu)點(diǎn)是方便，容易理解。但是最近有觀點(diǎn)認(rèn)為這種方法對html的web語義產(chǎn)生了破壞，建議將事件注冊寫到j(luò)s模塊中，從而將html與js分離。

2.js賦值法。

    element.onclick = function(){alert(this.innerHTML);}
  

?

注意：以上兩種方法只支持事件冒泡方式，不支持捕獲方式。

3.添加事件監(jiān)聽方法。

    element.addEventListener(‘click’, observer, useCapture);
  

?

addEventListener方法接受三個(gè)參數(shù)。第一個(gè)參數(shù)是事件名稱，值得注意的是，這里事件名稱 與IE的不同，事件名稱是沒’on’開頭的 ；第二個(gè)參數(shù)observer是回調(diào)處理函數(shù)；第三個(gè)參數(shù)注明該處理回調(diào)函數(shù)是在事件傳遞過程中的捕獲階段被調(diào)用還是冒泡階段被調(diào)用，true表示注冊到捕獲階段，false表示注冊到冒泡階段。

移除已注冊的事件監(jiān)聽器調(diào)用element的removeEventListener即可，參數(shù)不變.

    element.removeEventListener(‘click’, observer, useCapture);
  

?

?特別的，在IE中使用attachEvent方法來實(shí)現(xiàn)。

    element.attachEvent(‘onclick’, observer);
  

?

attachEvent接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是事件名稱，第二個(gè)參數(shù)observer是回調(diào)處理函數(shù)。這里得說明一下，有個(gè)經(jīng)常會(huì)出錯(cuò)的地 方，IE下利用attachEvent注冊的處理函數(shù)調(diào)用時(shí)this指向不再是先前注冊事件的元素，這時(shí)的this為window對象了。 IE只支持事件注冊到冒泡階段。

要移除先前注冊的事件的監(jiān)聽器,調(diào)用element的detachEvent方法即可，參數(shù)相同。

    element.detachEvent(‘onclick’, observer);?
  

事件注冊到不同階段的舉例，下面是典型的冒泡方式：

    <p onclick="javascript:alert('外面的p被點(diǎn)擊！')">
<input type="button" value="注冊到冒泡階段，點(diǎn)擊我查看效果" onclick="javascript:alert('里面的button被點(diǎn)擊！')"/>
</p>

  

?

?下面是注冊到冒泡階段的代碼，使用了addEventListener方法。注意addEventListener的第三個(gè)參數(shù)在這里是true，這意味 著將事件click注冊到了捕獲階段，也就是外面的p將先得到這個(gè)事件，然后才是內(nèi)層的button。（以下例子請采用Firefox或chrome等非 ie瀏覽器測試）

    <p id="js_out2">
 <input type="button" id="js_in2" value="注冊到捕獲階段，點(diǎn)擊我查看效果"/>
</p>
<script type="text/javascript">
document.getElementById("js_out2").addEventListener('click', function(){alert('外面的div被點(diǎn)擊！');}, true);
document.getElementById("js_in2").addEventListener('click',function(){alert('里面的div被點(diǎn)擊！');},true);
</script>

  

?

再放兩個(gè)例子增加讀者對捕獲和冒泡的印象。

1. 冒泡事件和停止冒泡向上傳播的例子

2. 捕獲事件并停止向下傳播的例子

?

?

[ 轉(zhuǎn)自 : http://www.ilovespringna.com/?p=34023 ]

簡析JavaScript事件、以及捕獲和冒泡