addEventListener与attachEvent区别

DOM2级事件处理程序

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

addEventListener
removeEventListener
所有的DOM节点都包含这两个方法，并且他们都接受三个参数：
1.事件类型
2.事件处理方法
3.布尔参数，默认false
(true捕获阶段调用事件处理方法；false冒泡阶段调用事件处理方法。)

参数参数说明 element.addEventListener(type,listener,bool)

element 要绑定事件的对象，及HTML节点。

type 事件名称，注意去掉事件前边的“on”，比如“onclick”要写成“click”，“onmouseover”要写成“mouseover”。

listener 要绑定的事件监听函数，注意只写函数名，不要带括号。

bool: true捕获阶段调用事件处理方法；false冒泡阶段调用事件处理方法。

IE不支持addEventListener和removeEventListener方法
实现了两个类似的方法：

attachEvent
detachEvent

这两个方法都接受两个相同的参数。
1.事件处理程序名称
2.事件处理程序方法

IE只支持事件冒泡

兼容性

attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

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

来源：oschina

链接：https://my.oschina.net/bing309/blog/4913333

标签

element

opera

safari

Chrome

firefox