addEventListener（）和attachEvent（）的区别和兼容写法

　

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);
    }
}

相关阅读

最全整理浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的

常见的浏览器兼容性问题总结

1. 不同浏览器的标签默认外补丁margin和内补丁padding不同发生概率：100%解决方案：使用CSS通配符*，设置内外补丁为0*{ margin: 0; pa

浏览器兼容性测试工具

相关连接：【浏览器兼容性概述】 目录 一、浏览器兼容性测试工具 1.0、IETester【免费·exe】 1.1、SuperPreview【收费·exe】 1.2

模块npptools.dll 与 win7 64位不兼容

64位的系统一般都是可以安装32位程序的，执行   C:\Windows\SysWOW64\regsvr32.exe 而不是   C:\Windows\System32\regs

WEB兼容性测试