事件流
事件
是文檔或在瀏覽器窗口發(fā)生的特定的交互瞬間。
js和html之間的交互都是通過(guò)事件觸發(fā)的。
事件流概述
當(dāng)瀏覽器發(fā)展到第四代時(shí)（IE4和Netscape Communicator 4）,瀏覽器的開(kāi)發(fā)團(tuán)隊(duì)遇到一個(gè)很有意思的問(wèn)題：頁(yè)面的哪一部分會(huì)擁有特定的事件？想象下在一張紙上有一組同心圓，如果你把手指放在圓心上，那么你的手指指向的不是一個(gè)圓，而是一組圓。兩家公司的開(kāi)發(fā)團(tuán)隊(duì)在看待瀏覽器事件方面還是一致的。如果你單擊了某個(gè)按鈕，那么同時(shí)你也單擊了按鈕的容器元素，甚至整個(gè)頁(yè)面。
事件流描述的是從頁(yè)面中接受事件的順序。但有意思的是，IE和Netscape開(kāi)發(fā)團(tuán)隊(duì)居然提出了兩個(gè)截然相反的事件流概念，也就是IE提出的事件冒泡流和Netscape提出的事件捕獲流。
- 事件冒泡
指事件開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)（這也是我們現(xiàn)在所常用的事件流）。 - 事件捕獲
不太具體的節(jié)點(diǎn)應(yīng)該更早的接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該在最后接收到節(jié)點(diǎn)。
事件流分級(jí)
DOM0級(jí)
所有瀏覽器都支持DOM0級(jí)事件處理程序，且使用該方式時(shí)，事件處理程序是在元素的作用域中運(yùn)行，因此程序中的this都是指向元素。
添加事件
var oDiv1 = document.getElementById("div1");
oDiv1.onclick = function(){
alert(this===oDiv1);//true
}
移出事件
oDiv1.onclick = null;
目前為止，我還是非常喜歡DOM0級(jí)事件處理程序的，沒(méi)有瀏覽器兼容性問(wèn)題；但是一個(gè)DOM0級(jí)事件只能給某一個(gè)元素添加一個(gè)事件處理函數(shù)，而DOM2級(jí)事件處理程序（事件監(jiān)聽(tīng)機(jī)制）可以給同一個(gè)元素依次添加多個(gè)事件處理；
DOM2級(jí)
IE9(含)以上，firefox，chrome，safari使用以下方法:
- 添加事件
oDiv.addEventListener(" click ",fOne,false);
oDiv.addEventListener(" click ",fTwo,false);
oDiv.addEventListener(" click ",fThree,false);
注意：這里的事件名是在DMO0級(jí)的基礎(chǔ)上去掉"on"的，這里的false是指不使用事件捕獲流。
- 移除事件
oDiv.removeEventListener(" click ",fOne,false);
oDiv.removeEventListener(" click ",fTwo,false);
注意：在移除事件時(shí)，事件處理程序的參數(shù)序和添加時(shí)的參數(shù)一致。
IE8（含）以下的IE瀏覽器使用以下方法：
oDiv.attachEvent(" onclick ",fOne);
移出事件處理：
oDiv.detachEvent(" onclick ",fOne);
注意參數(shù)變化。
