JavaScript 跨浏览器的事件系统是指在各种浏览器下实现统一的事件，保证我们开发的代码能够在各种浏览器下都能正确的运行，不受浏览器差异的影响。以下是实现 JavaScript 跨浏览器的事件系统的完整攻略。

创建跨浏览器的事件处理程序

我们可借助 W3C 的标准事件模型来创建跨浏览器的事件处理程序，代码如下：

//创建事件处理程序
function addEventHandler(target, eventType, handler) {
  if (target.addEventListener) {
    target.addEventListener(eventType, handler, false);
  } else if (target.attachEvent) {
    target.attachEvent("on"+eventType, handler);
  } else {
    target["on"+eventType] = handler;
  }
}

//移除事件处理程序
function removeEventHandler(target, eventType, handler) {
  if (target.removeEventListener) {
    target.removeEventListener(eventType, handler, false);
  } else if (target.detachEvent) {
    target.detachEvent("on"+eventType, handler);
  } else {
    target["on"+eventType] = null;
  }
}

如上代码所示，我们创建了 addEventHandler 函数和 removeEventHandler 函数，用来添加和移除事件处理程序。当浏览器支持 W3C 标准事件模型时，使用 target.addEventListener/target.removeEventListener，否则再判断是否支持 IE 自己的事件模型，最后考虑做降级处理，将 target["on"+eventType] = handler。

示例1：跨浏览器点击事件

下面是一个跨浏览器的点击事件的示例：

var btn = document.getElementById("myButton");
addEventHandler(btn, "click", function(event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  console.log("clicked on", target);
});

在上面的代码示例中，我们使用 addEventHandler 函数来添加点击事件处理程序到按钮元素。需要注意的是，处理程序中第一个参数是 event 对象，事件对象可以通过 event 或 window.event 来获取。此外，需要考虑到浏览器差异，一些浏览器不支持 event.target 属性，需判断是否存在，如果不存在则赋值 event.srcElement。

示例2：跨浏览器的键盘事件

下面是一个跨浏览器的键盘事件的示例：

var textbox = document.getElementById("myTextbox");
addEventHandler(textbox, "keydown", function(event) {
  event = event || window.event;
  var keyCode = event.keyCode || event.which;
  console.log("pressed key", keyCode);
  if (keyCode === 13) {
    console.log("enter key pressed");
  }
});

在上面的代码示例中，我们使用 addEventHandler 函数向文本框添加键盘按下事件处理程序。同样需要注意的是事件对象可能会被命名为 event 或 window.event，因此日常应用中需注意判断。同时，需要注意一些浏览器看到 event.keyCode 属性而另一些浏览器看到 event.which 属性。因此，我们需要检测两者，以提供跨浏览器的支持。

以上就是JavaScript跨浏览器的事件系统的完整攻略。

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