javascript 事件兼容

2017-06-27  本文已影响0人  石子1110

今天了解了js 的事件,以前写代码时并不会在意它的兼容问题,那么今天总结几个关于事件的兼容写法。

1、js中经常用的就是点击事件,它在chrome 、火狐以及IE浏览器下的兼容写法比较新奇,

document.onclik = function(e){

       var oEvent = e || event;     

注意,不要将var e=e||event; 写成 var e=event||e; ,这在FireFox下会提示错误,FireFox无法处理未声明未赋值的变量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、阻止事件的冒泡,我理解的就是父子级同时都绑定了点击事件,如果执行了其中一个事件,另外一个的事件也会被执行,而且是从内往外执行,也就是子级先执行然后父级也被执行,就造成了不必要的麻烦,所以我们需要做的就是阻止事件的冒泡。首先阻止事件的冒泡,暂时先写两个方式:

w3c 的方法是 e.stopPropagation(),

IE 则是使用 e.cancelBubble = true;

兼容写法:

var e = e || window.event;    //这里一定写成window.event,网上是说的是在IE(暂时仅限于8.0以下版本)下是行不通的,IE采用了一种非标准的方式,并不是将事件作为函数参数传入,而是将事件作为window对象的event属性:window.event、window.event.screenX...

if ( e && e.stopPropagation ){

     e.stopPropagation();

}else{

     e.cancelBubble = true;

}

4、取消默认 事件,兼容写法

e.preventDefault()       // 火狐

 e.returnValue = false

var e = e||window.event;

if(e && e.preventDefault){

     e.preventDefault();

}else{

     e.returnValue = false;

}

5、事件的委托,一般来说此类方法会涉及到循环,用了事件委托之后,杜绝循环,执行效率更高,而且新创建的元素也可以执行该事件。

事件的委托的兼容写法:

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、事件的捕获,将其进行封装:

function fun(ele,eve,handler,type){

     if(ele.attchEvent){

        ele.attachEvent("on"+eve,handler)

     }else{

        ele.addEventListener(eve,handler,type)

   }

}

ele:元素

eve:事件

handler:函数

type:值为false 或 true

上一篇下一篇

猜你喜欢

热点阅读