JS在IE和FF下attachEvent,addEventListener学习笔记

下面是关于“JS在IE和FF下attachEvent,addEventListener学习笔记”的完整攻略：

什么是attachEvent、addEventListener？

attachEvent和addEventListener都是JavaScript中绑定事件的方法。

• attachEvent是IE浏览器下的方法，用于绑定事件。
• addEventListener是DOM2的标准方法，可以在现代浏览器中（包括IE9及以上版本）使用。

attachEvent示例

以下是示例代码：

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function() {
  alert("你点击了按钮！");
});

使用attachEvent绑定事件的参数有两个：

element.attachEvent(event, function)

其中，element是指要绑定事件的元素；event是一个字符串，表示要绑定的事件类型，比如"click"或"mouseover"；function是一个函数，表示当事件发生时需要执行的代码。

对于同一个元素，可以多次绑定同一个事件类型。每次添加的都成为处理该事件的监听器（listener）。

那么如何移除监听器呢？需要使用detachEvent方法：

element.detachEvent(event, function)

addEventListener示例

以下是示例代码：

var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
  alert("你点击了按钮！");
});

使用addEventListener绑定事件的参数也有两个：

element.addEventListener(event, function)

其中，element是指要绑定事件的元素；event是一个字符串，表示要绑定的事件类型，比如"click"或"mouseover"；function是一个函数，表示当事件发生时需要执行的代码。与attachEvent不同的是，addEventListener支持一个可选的第三个参数，用于指定事件被添加到指定阶段的监听器（listener）。比如：

element.addEventListener(event, function, useCapture)

其中的useCapture参数，如果为true，表示事件被添加到捕获阶段的监听器（listener）；如果为false或者省略，表示事件被添加到冒泡阶段的监听器（listener）。

那么如何移除监听器呢？需要使用removeEventListener方法：

element.removeEventListener(event, function)
element.removeEventListener(event, function, useCapture)

需要注意的是，使用removeEventListener方法移除监听器时，必须传入的函数要与之前绑定时使用的函数完全一样，否则移除无效。

总结

在现代浏览器中，尽可能使用addEventListener方法绑定事件，以便代码可以在多个浏览器上运行。如果需要兼容IE浏览器，也可以使用attachEvent方法。移除监听器时，需要确定传入的函数与绑定时使用的函数完全一样。

希望以上内容对你有所帮助。