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. メソッドを決定するコードは 1 回だけ実行する必要があります
  2. そのコードは、スクリプトの実行が開始されるとすぐに実行できます — DOM Ready やユーザー CTA のようなパフォーマンスの輻輳ホットスポットの邪魔にならないようにします
  3. 難解な機能コードを書いている間は、ブラウザの差異をすべて忘れることができ、その結果、コードの読み取りとパフォーマンスが向上します。
  4. 新しいブラウザの差異をサポートする必要がある場合、または既存のものを修正する必要がある場合は、イベントをバインドするたびにトレースするのではなく、コードを 1 か所で編集できます。
于 2013-02-27T16:54:38.323 に答える