0

我见过这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);
        }
    }
}());
4

1 回答 1

1

它们都是“正确的”，因为它们会产生相同的结果（假设element是一个 DOM 节点）。windowand的优点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;
}

优点是多方面的：

  1. 确定方法的代码只需要运行一次
  2. 该代码可以在脚本执行开始后立即运行——远离性能拥塞热点，如 DOM 就绪或用户 CTA
  3. 在编写深奥的功能代码时，您可以忘记所有关于浏览器差异的事情，您的代码将因此更好地阅读和执行
  4. 如果您需要支持新的浏览器差异或修复现有的差异，您可以在一次编辑代码，而不是每次绑定事件时跟踪
于 2013-02-27T16:54:38.323 回答