js事件绑定方式?标准事件绑定及事件对象event的兼容性问题

js兼容性问题

1、在标准的事件绑定中绑定事件的方法函数：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);
            }
        }

2、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

转载于:https://www.cnblogs.com/pangwl/p/8111469.html