以下是实现“纯JavaScript实现的兼容各浏览器的添加和移除事件封装”的完整攻略：

一、为什么要封装添加和移除事件的方法？

当我们在实现网页的交互效果时，通常需要使用JavaScript来操作DOM元素并添加相应的事件来触发我们所需的功能。JavaScript提供了添加事件监听器的方法，如addEventListener()，但不同浏览器实现这一方法的方式有所不同，为了确保兼容各个浏览器，我们需要进行封装，提供一种在各个浏览器中都能正常工作的方式来添加和移除事件。

二、封装添加和移除事件的方法

1. 添加事件

我们的添加事件的方法应该能够接收三个参数：目标元素、事件类型和要执行的回调函数。代码如下：

function addEvent(element, type, handler) {
  if (element.addEventListener) {
    // 针对支持addEventListener方法的浏览器：Chrome, Firefox, Safari, Opera等
    element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
    // 针对不支持addEventListener方法而支持attachEvent方法的浏览器：IE
    element.attachEvent('on' + type, handler);
  } else {
    // 针对不支持addEventListener也不支持attachEvent方法的浏览器
    element['on' + type] = handler;
  }
}

上述代码中，我们使用了三个if-else语句，分别判断当前浏览器是否支持addEventListener()方法、attachEvent()方法或者两者都不支持。如果浏览器支持addEventListener()方法，就使用它将回调函数添加到目标元素的事件监听器列表中；如果浏览器支持attachEvent()方法，就用它将回调函数添加到元素的事件列表中；如果浏览器两个方法都不支持，我们就使用元素的直接赋值方式来添加事件。

2. 移除事件

我们的移除事件的方法也应该能够接收三个参数：目标元素、事件类型和要移除的回调函数。代码如下：

function removeEvent(element, type, handler) {
  if (element.removeEventListener) {
    // 针对支持removeEventListener方法的浏览器：Chrome, Firefox, Safari, Opera等
    element.removeEventListener(type, handler, false);
  } else if (element.detachEvent) {
    // 针对不支持removeEventListener方法而支持detachEvent方法的浏览器：IE
    element.detachEvent('on' + type, handler);
  } else {
    // 针对不支持removeEventListener也不支持detachEvent方法的浏览器
    element['on' + type] = null;
  }
}

和添加事件的方法类似，我们也使用了三个if-else语句来判断当前浏览器支持哪种移除事件的方式，并将回调函数从相应的事件监听器列表中移除。

三、使用示例

以下是两个简单的使用示例：

1. 添加一个点击事件

var btn = document.getElementById('myButton');
addEvent(btn, 'click', function() {
  alert('Hello, world!');
});

以上代码给页面上一个id为myButton的按钮添加了一个点击事件，当按钮被点击时，弹出一个警告框显示"Hello, world!"。

2. 移除一个事件

var btn = document.getElementById('myButton');
var alertMessage = function() {
  alert('Hello, world!');
};
addEvent(btn, 'click', alertMessage); // 添加点击事件
removeEvent(btn, 'click', alertMessage); // 移除点击事件

以上代码先给页面上一个id为myButton的按钮添加了一个点击事件，然后又立即将这个点击事件移除了。

本文链接：http://task.lmcjl.com/news/15725.html