事件监听的相关兼容性

最新推荐文章于 2021-08-27 08:04:52 发布

哼着自己的小调调

最新推荐文章于 2021-08-27 08:04:52 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_37610328/article/details/70004451

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文提供了一种跨浏览器兼容性的事件处理方法，包括事件监听、移除、获取事件源、阻止冒泡及默认行为等关键功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//事件监听的兼容性写法
var addEvent=function(elements,type,callback){
    if(elements.addEventListener){
        elements.addEventListener(elements,type,false)
    }else if(elements.attachEvent){
        elements.attachEvent("on"+type,callback)
    };
};

//事件移除的兼容性写法
var removeEvent=function(elements,type,callback){
    if(elements.removeEventListener){
        elements.removeEventListener(elements,type,false)
    }else if(elements.detach){
        elements.detach("on"+type,callback)
    };
};

//获取事件源的兼容性写法
var getEvent=function(event){
    event = event || window.event;
    return event.target || event.srcElement;
};

//阻止事件冒泡的兼容性写法
var stopPropagation = function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
};

//阻止默认事件的兼容性写法
var preventDefault = function(){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
};

//通用事件监听对象
var Event = {
    addEvent: function(element,type,callback){
        if(element.addEventListener){
            element.addEventListener(type,callback,false);
        }else if(element.attachEvent){
            element.attachEvent('on' + type,callback);
        }
    },
    removeEvent: function(element,type,callback){
        if(element.removeEventListener){
            element.removeEventListener(type,callback,false);
        }else{
            element.detachEvent('on' + type, callback);
        }
    },
    getEvent: function(event){
        return event || window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    preventDefault: function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    }
}