JS dom2的兼容性写法

最新推荐文章于 2021-06-03 10:17:58 发布

boonyaxnn

最新推荐文章于 2021-06-03 10:17:58 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/boonyaxnn/article/details/89107617

JavaScript 专栏收录该内容

90 篇文章

订阅专栏

本文介绍了一种跨浏览器兼容的方法来实现DOM元素上的事件绑定与解绑，支持非IE及IE浏览器，通过JavaScript函数实现。此外，还提供了一个实用的对象封装，方便开发者调用。

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

添加事件绑定

* @param ele 触发事件的元素

* @param type 事件的类型

* @param methodName 处理该事件的函数名

function addEventListener(ele, type, methodName) {
    //判断浏览器的类型 如果是非IE浏览器
    if (ele.addEventListener) {// undefined
        ele.addEventListener(type,methodName);
        //如果是IE浏览器
    } else if (ele.attachEvent) {
        ele.attachEvent('on'+type,methodName);
        //使用dom0的方式解决
    } else {
        ele['on'+type] = methodName;
    }
}

* @param ele 需要解绑的元素

* @param type 该元素需要解绑的事件类型

* @param methodName 解绑的函数

function delEventListener(ele,type,methodName){
    //判断是否为非IE
    if(ele.removeEventListener){
        ele.removeEventListener(type,methodName);
    }else if(ele.detachEvent){
        //判断是否是IE
        ele.detachEvent('on'+type,methodName);
    }else{
        //使用dom0解决 （留一手）
        ele['on'+type] = null;
    }

}

封装为一个对象，便于调用

var obj_dom2 = {
    'addEvent': function (ele, type, methodName) {
        //判断浏览器的类型 如果是非IE浏览器
        if (ele.addEventListener) {// undefined
            ele.addEventListener(type, methodName);
            //如果是IE浏览器
        } else if (ele.attachEvent) {
            ele.attachEvent('on' + type, methodName);
            //使用dom0的方式解决
        } else {
            ele['on' + type] = methodName;
        }
    },
    'delEvent': function (ele, type, methodName) {
        //判断是否为非IE
        if (ele.removeEventListener) {
            ele.removeEventListener(type, methodName);
        } else if (ele.detachEvent) {
            //判断是否是IE
            ele.detachEvent('on' + type, methodName);
        } else {
            //使用dom0解决 （留一手）
            ele['on' + type] = null;
        }

    }
};