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

你可能感兴趣的:(JS)