网络编程
位置：首页>> 网络编程>> JavaScript>> 检测浏览器对事件的支持程度

检测浏览器对事件的支持程度

　来源：Ruby's Louvre　发布时间：2009-12-23 19:40:00　

标签：浏览器,事件,支持

自从jQuery搞出特性侦探这东东，西方从来没有如此狂热研究浏览器。在以前javascript与DOM遍地是bug，美工主宰前端的年代，人们只有两种极端方式，用户禁止脚本运行，浏览器商狂升级（IE6之前也很积极的）。

这年头，也就Base2与Prototype2做得最好，当然dojo与YUI也不错。不过最近五年，Opera与Safari都建立了对DOM完整的支持后，世界分两半，一半是IE统治的混乱世界，它是拥有如此丰富的私有特征，CSS表达式，HTC，CSS滤镜，VML，userData，XML数据岛，最早的AJAX支持，以及DHTML最好的支持API(innerHTML，innerText，outerHTML，outerText，insertAdjactentXXX，offsetXXX，clientXXX，scrollXXX，Range，designMode，sertRow和insertCell等动态操作表格API……)，难怪IE会赢的！不过IE也埋下了许多地雷，加之IE不会其他游览器升级那么快，许多Bug都要我们亲手修正。这么多浏览器，这么多版本，特性侦探是很有必要。现在我们看到那一套关于事件的API，基本上是微软从桌面搬过来，后来W3C又加一大堆与DOM开头的事件，不过除了DOMMouseScroll基本没什么人用。N多事件，与逐个嗅探浏览器那样成了个头痛的问题。

John Resig说过类库就是用来屏蔽浏览器的差异的。在国外这篇文章中，就有对事件支持的详尽分析（注，那个博客是John Resig经常去的，你可以把它当成的jQuery核心小组的酒吧，他们与其他高手经常在那里讨论浏览器的天方夜谭，研究javascript的炼金术）。在事件系统中，很明显的几个，IE支持mouseenter与mouseleave，Opera支持右键菜单但不允许你用contextmenu类似的API操作它，还有onbeforepaste, onbeforecut这些与input元素相关的事件，IE与WebKit支持，但FF不支持……非常混乱。一般我们可以用for...in循环把它遍历一下，或者像以下简单地检测：

'onclick' in document.documentElement; // true 
'onclick2' in document.documentElement; // false

很不幸，这不准确，因为我们可以添加一些同名的自定义属性。有人说，赶在用户添加之前检测它们，但也行不通，因此有些事件是只有特定元素才有的。

'onreset' in document.documentElement; // false 
'onreset' in document.createElement('input'); // true

在标准浏览器我们可以用setAttrubute为元素赋以已知事件名一个值，这个值会自动包装成一个函数，如果非事件名，则不会改变其类型。那么我检测它是否为函数就是！

var el = document.createElement('div'); 
el.setAttribute('onclick', 'return;'); 
alert(typeof el.onclick); // "function" 
el.setAttribute('onclick2', 'return;'); 
alert(typeof el.onclick2); // "undefined"

同样很不幸，基于众所周知的原因，IE的setAttribute与W3C是有很大的差别，IE会原样输出，加之，IE不存在所谓的泛化函数（原生对象的方法），它的API没有name,call,apply与toString，因此也无法判定它们是否为函数。综合以上两种方式，看看外国人搞出什么怪物来……

var isEventSupported = (function(){//使用模块模式 
var TAGNAMES = {//特定元素上的特定事件 
'select':'input','change':'input', 
 'submit':'form','reset':'form', 
'error':'img','load':'img','abort':'img'
} 
function isEventSupported(eventName, element) { 
element = element || document.createElement(TAGNAMES[eventName] || 'div'); 
eventName = 'on' + eventName; 
// When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those 

var isSupported = (eventName in element);//DOM0 
if (!isSupported) { 
// if it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element 
if (!element.setAttribute) { 
element = document.createElement('div'); 
} 
if (element.setAttribute && element.removeAttribute) { 
element.setAttribute(eventName, ''); 
isSupported = typeof element[eventName] == 'function'; 
// if property was created, "remove it" (by setting value to `undefined`) 
if (typeof element[eventName] != 'undefined') { 
element[eventName] = void 0; 
} 
element.removeAttribute(eventName); 
} 
} 
element = null; 
return isSupported; 
} 
return isEventSupported; 
})();


连HTML5与iPhone touch的一些专有事件也能检测到。

在jQuery1.4α2中也支持这种特性侦探了，不过用的是早期版本，不如上面写出来的那个！

//jQuery1.4α2 
var eventSupported = function( eventName ) {  
var el = document.createElement("div");  
eventName = "on" + eventName;  
var isSupported = (eventName in el);  
if ( !isSupported ) {  
el.setAttribute(eventName, "return;");  
isSupported = typeof el[eventName] === "function";  
}  
el = null;  
return isSupported;  
};

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com