javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)

2023年5月27日下午11:57 • JavaScript

JavaScript高级程序设计第二版第十二章主要讲解了事件的相关知识点，其中包括事件的定义方式、事件处理程序、事件流、事件对象、跨浏览器问题的处理等内容。本章提供了一些实用的跨浏览器检测方法，以保证代码在各个浏览器平台下能够正常工作。下面是本章的要点总结：

事件处理程序

常见的事件处理程序有两种定义方式：

HTML事件处理程序：直接将事件处理程序添加到HTML标签上，如下：

<button onclick="alert('Hello world')">Click me!</button>

缺点是耦合度高，可维护性差。

DOM0级事件处理程序：将事件处理程序赋值给DOM节点的事件处理程序属性，如下：

var btn = document.getElementById('myButton'); btn.onclick = function() { alert('Hello world'); };

缺点是同一事件处理程序只能绑定到一个元素上。

事件流

事件流描述的是从页面中接收事件的顺序。主要分为冒泡流和捕获流。冒泡流表示事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点；捕获流则是相反的过程，即由不具体的节点先接收事件，然后逐级向下传播到最具体的元素。

事件对象

事件处理程序会接收到一个事件对象，其中包含了与事件相关的一些信息，比如事件类型、触发事件的目标、鼠标点击位置等等。兼容性最好的方式就是使用W3C DOM规范定义的event对象，而IE8及更早版本则使用全局对象window.event。跨浏览器处理事件对象最可靠的方式是通过传递event对象来实现。

跨浏览器检测方法

由于不同浏览器对JavaScript实现标准的支持程度不同，为了保证程序在各个平台下正常工作，需要进行跨浏览器检测。本章提供了一些实用的跨浏览器检测方法。

检测浏览器类型

var isIE = !!window.ActiveXObject || "ActiveXObject" in window; // 判断是否为IE浏览器 var isChrome = navigator.userAgent.indexOf("Chrome") !== -1; // 判断是否为Google Chrome浏览器

检测浏览器功能支持

```
function isEventSupported(eventName, element) { // 检测是否支持某种事件
element = element || document.createElement('div');
eventName = 'on' + eventName;
var isSupported = eventName in element;
if (!isSupported) {
element.setAttribute(eventName, 'return;');
isSupported = typeof element[eventName] === 'function';
}
element = null;
return isSupported;
}

console.log(isEventSupported('click')); // true
```

以上是本章的部分要点总结，可以帮助读者理解并使用事件相关的知识点。下面提供两个示例说明：

示例一：跨浏览器绑定事件处理程序

跨浏览器绑定事件处理程序可以通过以下方式实现：

var EventUtil = {
  addHandler: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false); // 支持DOM2级事件处理程序
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, handler); // 支持IE事件处理程序
    } else {
      element['on' + type] = handler; // 直接定义事件处理程序
    }
  }
};

var btn = document.getElementById('myButton');
EventUtil.addHandler(btn, 'click', function(event) {
  console.log('Button clicked');
});

上述代码通过封装EventUtil对象，实现了跨浏览器绑定事件处理程序的功能。如果浏览器支持DOM2级事件处理程序，则使用addEventListener方法，否则判断是否支持IE事件处理程序，最后如果都不支持则直接通过定义事件处理程序方式来添加事件。这样可以确保代码在各个平台下都能够正常工作。

示例二：阻止默认事件

阻止元素默认事件可以通过两种方式实现：

在事件处理程序中使用event.preventDefault()方法

var link = document.getElementById('myLink'); link.onclick = function(event) { event.preventDefault(); // 阻止链接的默认跳转行为 console.log('Link clicked'); };