Question

我见过这3个：

if(window.attacheEvent)

if(document.attachEvent)

if(element.attachEvent)

注意：

元素随时可用。
请不要图书馆

应用每个答案的Fascade模式

$NS.addEventL = (function determineEventBinding(){
    if(window.attachEvent){
        return function attachEvent(element, type, callNow){
            element.attachEvent('on' + type, callNow);
        }
    }
    else {
        return function addEventListener(element, type, callNow){
            element.addEventListener(type, callNow);
        }
    }
}());

Answer 1

它们都是“正确的”，因为它们会产生相同的结果（假设element是一个DOM节点）。 window和document的优势在于您不必创建或查找要测试功能的元素，这意味着您可以更有效地执行测试。

你说element随时可用：这表明你正在编写一个插件/库/模块，它创建元素并将事件绑定到它们。我会说，分开你的事件：

你可能有这样的代码：

function createButton(){
    // Create element
    var button = document.createElement('input');

    // Bind event
    if(button.attachEvent){
        button.attachEvent('onclick', actionTrigger);
    }
    else {
        button.addEventListener('click', actionTrigger, false);
    }

    return button;
}

您可能最好自己编写自己的包装函数：

var bindEvent = (function determineEventBinding(){
    if(window.attachEvent){
        return function attachEvent(element, hook, func){
            element.attachEvent('on' + hook, func);
        }
    }
    else {
        return function addEventListener(element, hook, func){
            element.addEventListener(hook, func, false);
        }
    }
}());

...然后在编写功能代码时使用你的包装器忘记所有头痛：

function createButton(){
    // Create element
    var button = document.createElement('input');

    // Bind event
    bindEvent(button, 'click', actionTrigger);

    return button;
}

优点是多方面的：

确定方法的代码只需运行一次
该代码可以在脚本执行开始后立即运行 - 避免像DOM就绪或用户CTA这样的性能拥塞热点。
在编写深奥的功能代码时，您可以忘记所有与浏览器的差异，因此您的代码将会读取并执行得更好
如果您需要支持新的浏览器差异或修复现有浏览器差异，您可以在一次编辑代码而不是每次绑定事件时进行跟踪

检查attachEvent（）可用性的正确方法是什么？

1 个答案: