js事件綁定方式?標準事件綁定及事件對象event的兼容性問題

js兼容性問題

一、在標準的事件綁定中綁定事件的方法函數：addEventListener,而IE使用的是attachEvent(只有IE能識別此方法);

解決IE8兼容問題

方法一：
try{
    dom.addEventListener("click",function(){
        alert('ok');
    })
}catch(e){
    dom.attachEvent("onclick",function(){
        alert('ok');    
}
方法二：
if(dom.addEventListener){//判斷有誤此屬性
    dom.addEventListener("click",function(){
        alert('ok');
    },false)
}else{
    dom.attachEvent("onclick",function(){
               alert("ok");
           },false);//false默認冒泡時觸發
}
//或者，能夠把這個兼容寫法封裝成一個函數，用的時候直接調用就行，這樣就不用每次綁定事件時都要判斷一下。
        function myAddEvent(obj,ev,fn)    //obj爲要綁定事件的元素，ev爲要綁定的事件，fn爲綁定事件的函數
        {
            if(obj.attachEvent)
            {
                obj.attachEvent("on" + ev,fn);
            }
            else
            {
                obj.addEventListener(ev,fn,false);
            }
        }

二、js中事件對象event的兼容性問題

* w3c標準規定，事件是做爲函數的參數傳入的，eg:

        <div id="box">點擊我將得到屏幕座標</div>
        document.getElementById("box").onclick=function(e){// 這裏函數傳入的參數e,就是事件
            alert(e.screenX);
        }

* IE採用了一種非標準的方式，將event事件對象做爲window對象的event屬性:window.event

        window.event.screenX

* 兼容法

    <div id="box">點擊我將得到屏幕座標</div>
        document.getElementById("box").onclick=function(e){// 這裏函數傳入的參數e,就是事件
            var e=e|| event;//順序不能調換
            alert(e.screenX);
        }

事件綁定的幾種方法

• 1.把事件綁定在元素上(把事件當作HTML元素的屬性)

  <button onclick="alert("ok")"></button>

• 2.把事件當作dom對象的方法

  <button id="btn"></button>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        alert("ok");
    }

• 3.事件監聽方式(標準綁定方式)

  obj.addEventListener(ev,fn,false|true);
    obj.attachEvent("on"+ev,fn); //適用於IE