美文网首页
事件兼容性处理

事件兼容性处理

作者: Trytodo_zbs | 来源:发表于2019-01-28 01:12 被阅读2次

1.添加事件
一般来说有三种方式addEventListener、attachEvent、on

        addHandler: function(element,type,handler){  //添加事件
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },

attachEvent是IE特有的方法
现在使用on和addEventListener比较多
on 和其他两种不同的是 on事件只能绑定一个方法,多次绑定会被替换,其他的不会

2.获取event对象

event?event:window.event

3.获取target(当前html对象)

event.target||event.srcElement

4.阻止事件冒泡

if(event.preventDefault){
    event.preventDefault();
}else {
    event.returnValue=false;
}

5.移除事件
移除事件讲究比较多,如果你添加的事件方法不是命名方法,那么你很难直接移除该事件;
移除方法需要有指向方法的指针,匿名方法是没有玩意的

element.addEventListener("click",function(){

},false);

像这样写的就不要想着去移除了

6.获取相关元素

if(event.relatedTarget){
    return event.relatedTarget;
}else if(event.toElement){
    return event.toElement;
}else if(event.fromElement){
    return event.fromElement;
}else{
    return null;
}

使用场景还是比较少的

相关文章

  • 事件兼容性处理

    1.添加事件一般来说有三种方式addEventListener、attachEvent、on attachEven...

  • jQuery的DOM事件

    jQuery的事件模型 提供了统一的事件处理方法,不需要再考虑兼容性问题 允许添加多个事件处理函数,jQuery内...

  • JS的原生事件

    javascript原生的事件包括事件流、处理函数、事件对象等。而在兼容性也有问题。 1事件流 事件流是ie和Ne...

  • 对dom元素事件的知识点及方法封装

    绑定事件处理函数的方法 1、ele.onxxx = function (){} 兼容性好,但是一个元素的同一事件只...

  • 事件封装

    事件在不同浏览器需要兼容性处理,现封装起来,便于日后使用和学习。

  • 鼠标滚轮事件兼容性处理

    一般版 精炼版

  • 事件对象及兼容性处理

    1. 浏览器自带的行为,即使没有给元素绑定事件,事件也是存在的。比如: onclick、onmouseover(o...

  • 事件

    如何绑定事件处理函数 1.ele.onxxx = function(event){}兼容性很好,但是一个元素的同一...

  • (转) js原生事件封装

    第一部分 event 添加事件,删除事件,以及冒泡的屏蔽,并都做了兼容性的处理 第二部分 getByClass 对...

  • js-图片跟随鼠标移动

    事件的兼容性代码 使用:

网友评论

      本文标题:事件兼容性处理

      本文链接:https://www.haomeiwen.com/subject/rhznjqtx.html