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

上一篇中介绍了jQuery1.4版本新增的几个浏览器特性检测方案和具体的目的,本文将以事件为中心,介绍一个较为完整、通用的事件检测方案。

事件检测,即检测某一事件在不同的浏览器中是否存在(可用),这在编写Javascript的过程中也非常重要,如mouseenter/mouseleave事件虽然实用,但并不是所有浏览器都提供了标准的支持,因此需要自己手动模拟,即:

function addEvent(element, name, handler) {  
    if (name == 'mouseenter' && !hasEvent(name, element)) {
        // 通过其他手段模拟mouseenter事件
    }
    // 正常的事件注册
}

本文就重点讲述以上代码中hasEvent的具体实现。

基本方案

关于事件的最基本检测方式,则需要从事件的注册方法开始说。

事件通常有3种注册方式,其中之一就是内联式,即在HTML中通过属性的方式声明事件,比如:

<button onclick="console.log('CLICKED!');">CLICK ME</button>  

以上代码创建了一个<button>标签,并注册了click事件。

另一个方案是通过直接给onclick赋值来注册事件:

document.getElementById('myButton').onclick = function() {  
    console.log('CLICKED!');
};

从上面两种注册事件的方式可以发现,其实onclick<button>标签的一种属性(attribute),通过对其赋值可以完成事件的注册。

因此,最基本的事件检测方案,就是通过检查on[事件名]属性是否存在于DOM元素之中,因此有最简单的一个版本:

function hasEvent(name, element) {  
    name = name.indexOf('on') ? 'on' + name : name;
    element = element || document.createElement('div');
    var supported = name in element;
    return supported;
}

需要注意的是,事件是对on[事件名]的形式作为元素的属性而存在的,因此从通用性上考虑,在必要的时候对事件名补上on即可。另外由于是一个通用的判断事件是否可用的函数,当没有给定具体的元素时,可以使用最广泛应用的<div>元素作为替代。

部分标签特有事件

有些事件是一些元素特有的,通常包括以下几个:

  • <form>独有事件:submitreset
  • <input>独有事件:changeselect
  • <img>独有事件:loaderrorabort

考虑到这些事件的存在,使用<div>元素有时会得到错误的结果,因此在创建一个通用的替代用元素时,可以使用一个字典来维护需要创建的元素标签名:

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');
        supported = name in element;
    }
}());

使用闭包将tags作为静态的字典使用,可以在一定程度上减少对象生成的开销。

DOM污染

DOM元素之所以会有类似onclick的属性,是因为在DOM元素对象的__proto__中有这个属性,由于Javascript弱类型机制,外部代码可以通过对__proto__添加属性而影响hasEvent函数的结果,如以下代码在Firefox和Chrome中就会产生错误的结果:

document.createElement('div').__proto__.ontest = function() {};  
var supported = hasEvent('test', document.createElement('div')); //true  

在上面的示例中,虽然在修改__proto__属性和调用hasEvent时,使用的是不同的<div>对象,但由于__proto__的实质是原型链中的对象,因此会影响到所有的<div>对象。

为了处理这种情况,需要尝试将__proto__属性中相应的属性进行删除,由于原生类型的属性带有[[DontDelete]]标记,是无法使用delete关键字进行删除的,因此对hasEvent函数附加以下的逻辑就可以更安全地判断:

var temp = proto[name];  
if (supported && temp && delete proto[name]) {  
    supported = name in element;
    proto[name] = temp;
}

逻辑很简单,尝试把__proto__中有可能附加上去的删了再试一试,当然别忘了再把原来的值变回去。

Firefox开始BUG

很遗憾,前文提供的hasEvent函数并不能在Firefox完美工作,在Firefox中运行以下代码将得到false的结果:

console.log('onclick' in document.documentElement); //Firefox弹出false  

因此,需要再次改造hasEvent函数以支持Firefox。在多数浏览器中,当元素使用内联方式注册了事件之后,可以通过element.on[事件名]来获取注册在上面的函数对象,例如:

<button id="test" onclick="alert('CLICKED!');" ontest="console.log('TEST!');">CLICK ME</button>  
<script type="text/javascript">  
    var button = document.getElementById('test');
    console.log(typeof button.onclick); // 弹出function
    console.log(typoef button.ontest); // 弹出string
</script>  

因此,只需要通过Javascript将一个表示函数的字符串挂载到on[事件名]属性(attribute)上,再去获取并判断是否得到了一个函数对象即可。

因此hasEvent函数在前文提供的方法返回false时,可以额外增加以下的代码以进一步确定事件是否存在:

if (!supported) {  
    element.setAttribute(name, 'return;');
    supported = typeof element[name] == 'function';
}

Firefox继续BUG

到现在为止,已经可以在兼容多数浏览器的情况下检测各DOM元素的事件,但是对于window对象的事件检测还没有一个完整的方案。

对于IE系列、Chrome和Safari,都可以使用简单的on[事件名] in window检测事件是否存在,因此原有的提供防止DOM污染后的hasEvent函数可以很好地完成任务。

唯有Firefox上,以下代码会给出错误的结果:

console.log('onload' in window); // Firefox弹出false  
console.log('onunload' in window); // Firefox弹出false  
console.log('onerror' in window); // Firefox弹出false  

值得庆幸也值得愤怒的是,Firefox很诡异地可以在<div>等元素上检测到以上3个事件,这直接导致对普通DOM元素检测事件的错误,也导致我们可以检测到window上的事件。好在一般开发者也不会去一个<div>之类的元素上检测是否有unload事件。因此补充hasEvent函数,将window上的事件导向一个<div>对象来检测部分事件:

if (!supported) {  
    if (!element.setAttribute || !element.removeAttribute) {
        element = document.createElement('div');
    }
    element.setAttribute(name, 'return;');
    supported = typeof element[name] == 'function';
    element.removeAttribute(name);
}

至此,一个较为完整的hasEvent函数完成了,虽然在Firefox上还存在一些问题,比如以下的代码:

console.log(hasEvent('unload', document.createElement('div')); // Firefox弹出true  

但是在99%的应用场合之下,这个函数是可以正确的工作的。

添加缓存

为了进一步提高hasEvent的工作效率,考虑到DOM规范规定的事件数量不多,可以对通用的事件(即不指定检测的元素对象)检测添加缓存机制。

添加了缓存之后,最终完整的hasEvent函数如下:

var hasEvent = (function () {  
    var tags = {
            onsubmit: 'form', onreset: 'form',
            onselect: 'input', onchange: 'input',
            onerror: 'img', onload: 'img', onabort: 'img'
        },
        cache = {};

    return function(name, element) {
        name = name.indexOf('on') ? 'on' + name : name;
        // 命中缓存
        if (!element && name in cache) {
            return cache[name];
        }
        element = element || document.createElement(tags[name] || 'div');
        var proto = element.__proto__ || {},
            supported = name in element,
            temp;
        // 处理显示在元素的__proto__上加属性的情况
        if (supported && (temp = proto[name]) && delete proto[name]) {
            supported = name in element;
            proto[name] = temp;
        }
        // 处理Firefox不给力的情况
        // Firefox下'onunload' in window是false,但是div有unload事件(OTL)
        if (!supported) {
            if (!element.setAttribute || !element.removeAttribute) {
                element = document.createElement('div');
            }
            element.setAttribute(name, 'return;');
            supported = typeof element[name] == 'function';
            element.removeAttribute(name);
        }
        // 添加到缓存
        cache[name] = supported;
        return supported;
    };
}());

Mutation Event

Mutation Event是由DOM Level 2制定的一类特殊的事件,这些事件在某个元素为根的DOM树结构发生变化时触发,可以在这里看到具体的事件列表。

遗憾的是hasEvent函数无法检测到Mutation Event,因此对于此类事件,需要另一种较为复杂的事件检测方案。

从Mutation Event的列表中可以发现,此类事件的特点在于当DOM树结构发生变化时才会被触发,因此可以使用下面这套逻辑去检测:

  1. 准备一个标记位,默认为false。
  2. 创建出一个DOM树结构。
  3. 注册一个Mutation Event。
  4. 通过一定手段让这个DOM树变化,从而触发注册的事件。
  5. 在事件处理函数中,将标记位设为true。
  6. 返回标记位。

具体的实现代码可以如下:

function hasMutationEvent(name, tag, change) {  
    var element = document.createElement(tag),
        supported = false;
    function handler() {
        supported = true;
    };
    // IE9开始支持addEventListener,因此只有IE6-8没有这个函数
    // 但是IE6-8已经确定不支持Mutation Event,所以有这个判断
    if (!element.addEventListener) {
        return false;
    }
    element.addEventListener(name, handler, false);
    change(element);
    element.removeEventListener(name, handler, false);
    return supported;
}

例如需要检测DOMAttrModified事件是否存在,只需要用以下代码:

var isDOMAttrModifiedSupported =  
    hasMutationEvent('DOMAttrModified', 'div', function (div) { div.id = 'new'; });

对于其他事件的检测,同样只需要制作出一个特定的change函数即可。

Mutation Event已经基本确定被DOM规范废除了,用以代替的是MutationObserver的实现

DOMContentLoaded

这个事件在文档加载完成时触发,但不需要等待图片等资源下载,多数Javascript框架的document.ready都会试图使用这个事件。

无论是hasEvent函数还是hasMutationEvent函数都无法检测到这个事件,但是问题不大,因为:

  • 这事件和onload一样,页面的生命周期中只会触发一次,不会频繁使用。
  • 所有支持addEventListener的浏览器都支持这个事件(包括IE9),因此判断简单。

所以这个事件被排除在了本文讨论范围之外,具体的可以查看各框架的document.ready函数的实现方式。

相关资源

hasEvent函数的具体源码和演示如下

哪位无聊就把所有的Mutation Event的检测函数写出来吧……都已经废除了就别写了……

comments powered by Disqus