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