细说浏览器特性检测(2)-通用事件检测

事件检测在JavaScript编程中扮演着至关重要的角色，尤其是在与浏览器兼容性打交道时。本文主要讨论的是如何检测浏览器是否支持特定的事件，以便在编写代码时能够做出适当的适配。我们以`hasEvent`函数为例，这是一个用于检测某个事件在特定元素上是否可用的通用方法。 基本的事件检测方案是从事件的注册方式着手。JavaScript中有多种注册事件的方法，例如内联式（在HTML中使用属性）和通过JavaScript代码动态绑定。内联式注册事件如`<button onclick="alert('CLICKED!')">CLICK ME</button>`，而通过JavaScript注册事件则是通过设置元素的`onclick`属性，例如`document.getElementById('myButton').onclick = function() { alert('CLICKED!'); };`。这两种方式都表明`onclick`是元素的一个属性，因此检测事件是否可用的基本思路就是检查元素上是否存在对应的`on[事件名]`属性。 `hasEvent`函数的初始实现如下： ```javascript function hasEvent(name, element) { name = name.indexOf('on') ? 'on' + name : name; element = element || document.createElement('div'); var supported = name in element; } ``` 这里的`name`参数是事件名称，`element`参数是可选的元素对象。如果`name`前不带`on`，则会自动补上。如果未提供`element`，则默认创建一个`div`元素进行检测。这种方法简单有效，但对于某些特定元素才有的事件（如表单的`submit`事件或图像的`load`事件），使用`div`元素可能无法正确判断。 为了解决这个问题，我们可以创建一个映射表，将特定事件与对应的元素标签关联起来： ```javascript var hasEvent = (function() { var tags = { onsubmit: 'form', onreset: 'form', onselect: 'input', onchange: 'input', onerror: 'img', onload: 'img', onabort: 'img' }; return function(name, element) { name = name.indexOf('on') ? 'on' + name : name; element = element || document.createElement(tags[name] || 'div'); var supported = name in element; }; })(); ``` 在这个改进版的`hasEvent`函数中，我们使用闭包保存`tags`字典，这样可以避免重复创建对象。当检测的事件属于特定元素时，将创建对应标签的元素，否则依然使用`div`。 然而，这种方法仍存在一个问题，那就是JavaScript的原型链可能导致DOM污染。如果在运行时修改了元素的原型（如`document.createElement('div').__proto__.ontest = function() {};`），那么所有后续创建的`div`元素都会被认为支持`test`事件，即使浏览器本身并不支持。为了避免这种情况，我们需要更严谨地检查元素是否真的支持事件，而不受原型链的影响。一种可能的解决方案是使用`Object.getOwnPropertyDescriptor`来获取元素的属性描述符，而不是直接检查`in`运算符。 总结来说，事件检测是JavaScript开发中不可或缺的一环，尤其在跨浏览器的场景下。`hasEvent`函数提供了一种检测事件支持性的通用方法，但需要注意DOM污染和特定元素事件的处理。通过不断优化和改进，我们可以确保代码在各种浏览器环境中都能正确地处理事件。