我們經(jīng)常說(shuō)的Javascript中的事件分為捕獲階段撇他，執(zhí)行階段和冒泡階段温技，對(duì)應(yīng)的是不同的標(biāo)準(zhǔn)對(duì)于事件處理的規(guī)則。以IE為代表的時(shí)間冒泡機(jī)制和以Netscape為代表的時(shí)間補(bǔ)獲機(jī)制。
1:事件冒泡
事件冒泡的處理過(guò)程是事件開(kāi)始的時(shí)候從最具體的元素到最不具體的元素，即事件的傳播路徑是子元素-父元素-父父元素薄辅，自底向上執(zhí)行
2:事件補(bǔ)獲
事件補(bǔ)獲的過(guò)程和冒泡的相反，自頂向下執(zhí)行抠璃，先是最不具體的元素接收到事件长搀，然后一直往下執(zhí)行到最具體的元素
3:事件處理
由于存在兩種不同的事件機(jī)制，所以對(duì)應(yīng)的存在了兩種不同的事件綁定機(jī)制
3.1:符合W3C標(biāo)準(zhǔn)的標(biāo)準(zhǔn)瀏覽器綁定機(jī)制
又稱DOM2級(jí)事件處理機(jī)制鸡典，對(duì)應(yīng)的事件的指定和刪除的方法是addEventListener和removeEventListener。
function addEventListener(事件名稱,事件動(dòng)作,是否綁定在捕獲階段)
function removeEventListener(事件名稱,事件動(dòng)作,是否綁定在捕獲階段)
在采用addEventListener添加事件的時(shí)候枪芒，可以添加多個(gè)事件彻况，如下：
var btn = document.querySelector("#btn");
btn.addEventListener("click",function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("double operation");
}, false);
添加完上述兩個(gè)事件之后，兩個(gè)事件會(huì)按照定義的順序執(zhí)行舅踪，即先執(zhí)行ID纽甘，再執(zhí)行double operation。
在事件執(zhí)行過(guò)程中抽碌，如果要禁止事件繼續(xù)流動(dòng)悍赢，則使用event.stopPropgation()
3.2:IE的事件綁定機(jī)制
又稱IE事件處理程序，IE使用的事件處理方法為attachEvent和detachEvent货徙。
function attachEvent("on"+事件名稱, 事件動(dòng)作)
function detachEvent("on"+事件名稱, 事件動(dòng)作)
在采用attachEvent的時(shí)候也可以添加多次事件左权，如下：
var btn = document.querySelector("#btn");
btn.attatchEvent("onclick",function(){
alert("clicked");
});
btn.attatchEvent("onclick", function(){
alert("double operation");
}, false);
要注意的是，現(xiàn)在安裝的事件的執(zhí)行順序與定義的順序相反痴颊，即先出現(xiàn)double operation赏迟，而后出現(xiàn)clicked。
在執(zhí)行過(guò)程中蠢棱，要是想取消事件锌杀，可以采用event.cancelBubble=true;
需要注意的是當(dāng)前的事件處理機(jī)制中的this是綁定到window下的。
3.3:DOM0級(jí)事件處理程序
比較傳統(tǒng)的方式泻仙，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩愿庠伲缦拢?/p>
var btn = document.querySelector("#btn");
btn.onclick=function(){
alert("clicked");
}
取消事件的話是btn.onclick = null
并且只能綁定一個(gè)事件
4:跨瀏覽器事件處理
var EventUtil = {
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEvnetListener(type, handler, false);
}else if(element.attachEvent){
element.attatchEvent("on" + type, handler);
}else{
element["on"+type] = handler;
}
},
removeHandler:function(element, type,handler){
if(element.removeEventLisntener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, handler);
}else{
element["on" + type] = null;
}
},
getEvent:function(event){
return event ? event || window.event;
},
getTarget:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if(event.stopPrapagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
}
