如何使用事件君仆？以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別忙厌？
- 關(guān)于事件流
1.1 IE的事件流：事件冒泡
由事件的目標(biāo)(event.srcElement)接受事件凫岖，然后逐級(jí)向上（例：下一個(gè)為包含event.srcElement的節(jié)點(diǎn)傳遞事件,直到文檔節(jié)點(diǎn)document;
1.2 其他瀏覽器支持的另一種事件流：事件捕獲
與事件冒泡正好相反，文檔節(jié)點(diǎn)document先監(jiān)聽到事件逢净，然后把事件逐級(jí)向下傳遞事件哥放，直到目標(biāo)節(jié)點(diǎn)event.target；
1.3 DOM事件流
DOM2級(jí)事件規(guī)范的事件流綜合了以上兩種爹土，把事件流分為了以下三個(gè)階段：
1.3.1 事件捕獲階段
不涉及事件目標(biāo)甥雕，或者說(shuō)這個(gè)階段在目標(biāo)之前就結(jié)束了；
1.3.2 處于目標(biāo)階段
被看作冒泡階段的一部分胀茵，所以可以在冒泡階段在目標(biāo)事件上操作事件社露；
1.3.3 事件冒泡階段
1.4 規(guī)范和瀏覽器實(shí)現(xiàn)的差別
DOM2級(jí)事件規(guī)范的捕獲階段，事件從文檔節(jié)點(diǎn)document開始傳播琼娘，現(xiàn)代瀏覽器大多數(shù)都是從window對(duì)象開始傳播事件的峭弟；
DOM2級(jí)事件規(guī)范捕獲階段不涉及事件目標(biāo)，現(xiàn)代瀏覽器大多數(shù)都在這個(gè)階段包含事件目標(biāo)脱拼。
- 如何使用事件瞒瘸？以下是幾種用來(lái)響應(yīng)事件的事件處理程序
HTML事件處理程序|DOM0級(jí)事件處理程序|DOM2級(jí)事件處理程序|IE的事件處理程序(IE11以下)
2.1HTML事件處理程序
2.1.1 指定事件:<button type="button" onclick="alert('響應(yīng)事件的處javascript代碼，可以用全局的函數(shù)')">Click Me!</button>
2.1.2 優(yōu)缺點(diǎn):簡(jiǎn)單熄浓，但是與HTML代碼緊密耦合情臭，更改不方便;
2.1.3 刪除事件:同DOM0的刪除事件處理方式;
2.2 DOM0級(jí)事件處理程序
2.2.1 指定事件:document.onclick = function(){alert("document has been clicked")};
2.2.2 刪除事件:document.onclick = null;
2.2.3 優(yōu)缺點(diǎn):簡(jiǎn)單且跨瀏覽器
2.2.4 實(shí)質(zhì): 為元素指定方法(栗子中為document指定onclick方法)，移除方法，所以其處理程序是在元素的作用域運(yùn)行的俯在；
2.3 DOM2級(jí)事件處理程序
2.3.1 指定事件:addEventListener("引號(hào)括起來(lái)的事件名"丁侄， 觸發(fā)事件后調(diào)用的事件處理程序, 是否在捕獲節(jié)點(diǎn)調(diào)用時(shí)間處理程序的布爾值)
栗子:var funA = function(){alert(" DOM2級(jí)事件處理程序")};
document.addEventListener("click", funA, false);
2.3.2 刪除事件: document.removeEventListener("click", funA, false);
如果指定的處理程序是匿名函數(shù)則不能刪除，因?yàn)闆]有函數(shù)名;
2.3.3 優(yōu)缺點(diǎn): 可以添加多個(gè)監(jiān)聽事件朝巫，缺點(diǎn)見2.3.2;
2.4 IE的事件處理程序(IE11以下，IE11及Edge用的DOM2級(jí)事件處理程序)
2.4.1 指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")});
2.4.2 刪除事件: detachEvent("onclick", funA);
如果指定的處理程序是匿名函數(shù)則不能刪除石景，因?yàn)闆]有函數(shù)名;
2.4.3 優(yōu)缺點(diǎn):可以添加多個(gè)監(jiān)聽事件劈猿，缺點(diǎn)見2.4.2;
- IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別
3.1 這里的IE是IE11以下;
3.2 參數(shù)的差別: attachEvent()的第一個(gè)參數(shù)比addEventListener()的事件名多一個(gè)"on"，
且沒有第三個(gè)參數(shù)潮孽，因?yàn)镮E事件模型只支持冒泡事件流;
3.3 事件處理函數(shù)作用域的區(qū)別: IE中事件處理程序處于全局作用域揪荣，其內(nèi)的this會(huì)指向window;
而用DOM（0或2）級(jí)事件的事件處理程序的作用域是元素作用域，其內(nèi)的this指向其所屬的元素
例: document.addEventListener("click", function(){
if(this == document){
alert("此時(shí)this指向document");
}
}, false);
3.4 事件對(duì)象event的屬性方法的差別
IE DOM
cancelBubble = true stopPropagation() //停止冒泡
returnValue = false preventDefault() //阻止元素默認(rèn)事件
srcEelement target //事件目標(biāo)
