JS兼容IE和非IE浏览器事件绑定的代码

原标题<addEventListener()和attachEvent()的区别和兼容写法>

addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。

addEventListener共有3个参数,如下所示:
element.addEventListener(type,listener,useCapture);
参数 参数说明
element 要绑定事件的对象,及HTML节点。
type 事件名称,注意去掉事件前边的“on”,比如“onclick”要写 成“click”,“onmouseover”要写成“mouseover”。
listener 要绑定的事件监听函数,注意只写函数名,不要带括号。

attachEvent共有2个参数,如下所示:
element.attachEvent(type,listener);

参数 参数说明
element 要绑定事件的对象,及HTML节点。
type 事件名称,注意加上事件前边的“on”,比如“onclick”和“onmouseover”,这是与addEventListener的区别。
listener 要绑定的事件监听函数,注意只写函数名,不要带括号。

兼容IE和非IE浏览器事件绑定的代码:

function on(element, type, callback) {
    if (element.addEventListener) { // 支持使用 addEventListener()
        // 判断 type 是否以 "on" 开头
        if (type.slice(0,2) === "on") // 以 "on" 开头,不需要,则去掉
            type = type.slice(2);
        element.addEventListener(type, callback);
    } else { // 不支持使用 addEventListener()
        // 判断 type 是否以 "on" 开头
        if (type.slice(0, 2) !== "on") // 没有以 "on" 开头,需要,则加上
            type = "on" + type;
        element.attachEvent(type, callback);
    }
}

————————————————
版权声明:本文为CSDN博主「我想吃烤香蕉」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_37321858/article/details/82429516