如何检测`focusin`支持？

Question

感谢Perfection kills,我们可以使用以下JavaScript来检测事件支持:

function hasEvent(ev) {
    var elem = document.createElement('a'),
        type = 'on' + ev,
        supported = elem[type] !== undefined;
    if (!supported) {
        elem.setAttribute(type, 'return;');
        supported = typeof elem[type] === 'function';
    }
    elem = null;
    return supported;
}

这只适用于我需要的时间:检测mouseenter支持; hasEvent('mouseenter')将在Chrome,Firefox等中返回false,应该如此.

但现在我正在尝试"修复"不支持focusin和focusout事件的浏览器.根据PPK,这基本上只是Firefox.不幸的是,Chrome和Safari被列为"不完整"支持,原因如下:

Safari和Chrome仅使用addEventListener触发这些事件; 不是传统的注册.

一般来说,这很好; addEventListener反正我只会用.但是,它确实意味着检测支持通过elem.onfocusin !== undefined将不起作用.我测试了它,这是真的:

<p>Do I support <a href="#">focusin</a>?</p>

<script>
var elem = document.getElementsByTagName('p')[0];

// hasEvent method defined here
function listener() {
    var response = hasEvent('focusin') ? 'Yes!' : 'No...';
    alert(response);
}

elem.addEventListener('focusin', listener, false);
</script>

No...Chrome中的上述提醒!! 有没有办法检测浏览器是否支持focusin,而不使用浏览器嗅探？

Answer 1

focus()这利用了调用触发器的事实focusin：http://jsfiddle.net/pimvdb/YXeD3/。

该元素必须可见并插入到 DOM 中，否则focusin由于某种原因不会被触发。

var result = (function() {
    var hasIt = false;

    function swap() {
        hasIt = true; // when fired, set hasIt to true
    }

    var a = document.createElement('a'); // create test element
    a.href = "#"; // to make it focusable
    a.addEventListener('focusin', swap, false); // bind focusin

    document.body.appendChild(a); // append
    a.focus(); // focus
    document.body.removeChild(a); // remove again

    return hasIt; // should be true if focusin is fired
})();