今天了解了js 的事件，以前寫代碼時并不會在意它的兼容問題，那么今天總結(jié)幾個關(guān)于事件的兼容寫法。
1、js中經(jīng)常用的就是點擊事件，它在chrome 、火狐以及IE瀏覽器下的兼容寫法比較新奇，
document.onclik = function(e){
? ? ? ?var oEvent = e || event; ? ??
注意，不要將var e=e||event; 寫成 var e=event||e; ，這在FireFox下會提示錯誤，F(xiàn)ireFox無法處理未聲明未賦值的變量event
? ? ? alert('x:'+oEvent.clientX + 'y:'+oEvent.clientY)
}
上述方式就是解決了兼容問題， alert('x:'+e.clientX + 'y:'+e.clientY)? ? //兼容火狐
alert('x:'+event.clientX + 'y:'+event.clientY) ? ? ?//兼容chrome
2、鍵盤按下事件，它的兼容寫法：
document.onkeydown = function(e){
? ? ?if(e.keyCode){
? ? ? ? alert(e.keyCode)
? ? }else{
? ? ? ?alert(e.which)
? ? ?}
}
3、阻止事件的冒泡，我理解的就是父子級同時都綁定了點擊事件，如果執(zhí)行了其中一個事件，另外一個的事件也會被執(zhí)行，而且是從內(nèi)往外執(zhí)行，也就是子級先執(zhí)行然后父級也被執(zhí)行，就造成了不必要的麻煩，所以我們需要做的就是阻止事件的冒泡。首先阻止事件的冒泡，暫時先寫兩個方式：
w3c 的方法是 e.stopPropagation()，
IE 則是使用 e.cancelBubble = true；
兼容寫法：
var e = e || window.event;? ? //這里一定寫成window.event,網(wǎng)上是說的是在IE(暫時僅限于8.0以下版本)下是行不通的，IE采用了一種非標(biāo)準(zhǔn)的方式，并不是將事件作為函數(shù)參數(shù)傳入，而是將事件作為window對象的event屬性：window.event、window.event.screenX...
if ( e && e.stopPropagation ){
? ? ?e.stopPropagation();
}else{
? ? ?e.cancelBubble = true;
}
4、取消默認(rèn) 事件，兼容寫法
e.preventDefault（） ? ? ? // 火狐
?e.returnValue = false
var e = e||window.event;
if(e && e.preventDefault){
? ? ?e.preventDefault();
}else{
? ? ?e.returnValue = false;
}
5、事件的委托，一般來說此類方法會涉及到循環(huán)，用了事件委托之后，杜絕循環(huán)，執(zhí)行效率更高，而且新創(chuàng)建的元素也可以執(zhí)行該事件。
事件的委托的兼容寫法：
oUl.onmouseover = function(e){
//為了兼容IE
? ? var oEvent = e||window.event;
? ? var target = oEvent.target|| oEvent.srcElement;
? ? if(target.nodeName.toLowerCase() == 'li'){
? ? ? ? target.style.background = 'red';
? ?}
}
6、事件的捕獲，將其進(jìn)行封裝：
function fun(ele,eve,handler,type){
? ? ?if(ele.attchEvent){
? ? ? ? ele.attachEvent("on"+eve,handler)
? ? ?}else{
? ? ? ? ele.addEventListener(eve,handler,type)
? ?}
}
ele:元素
eve：事件
handler：函數(shù)
type：值為false 或 true
