2012-03-16 14 views
-1

html要素を動的に追加および削除するプログラムがあり、これらの要素のそれぞれにイベントリスナーが必要な場合は、より簡単な変数にイベントリスナーを追加する方法がありますそれを一つずつ行うよりも?私は配列を使用し、配列の各インデックスにイベントリスナーを添付させたいが、それはうまくいかないようだ。JavaScriptで複数のイベントリスナーを動的に追加する

var1 = document.getElementById('name'); 
var1.addEventListener("mousedown", doMouseDown, false); 

これはうまくいきますが、約100個の要素があるので、100個の個別変数を作成するよりも簡単な方法があると考えていました。私はこれを行う簡単な方法があります。私は何か提案が大好きです。 :)

答えて

4

コードの繰り返しは、通常、ループを使用することで回避できます。この場合は、それを介して、リストのすべてのIDの(配列)、およびループを作成します。

var names = ['name1', 'name2', 'etc']; 
for (var i=0; i<names.length; i++) { 
    document.getElementById(name[i]).addEventListener("mousedown", 
                  doMouseDown, false); 
} 

あなたのすべての要素が全く子孫を持っていない場合、あなたはまた、共通の親にイベントを結合し、確認することができますevent.targetプロパティ:これらすべての要素がコンテナ要素の子である場合

var names = '|name1|name2|'; 
document.addEventListener('mousedown', function(event) { 
    // Use String.indexOf, because old IE browsers do not support Array.indexOf 
    if (names.indexOf('|' + event.target.id + '|') !== -1) doMouseDown(event); 
}, false); 
1

、あなたはすべてのこれらのイベントをキャプチャするために、親要素に単一のイベントリスナーを追加することができます。

javascriptイベントが渡され、DOMツリーを所有する方法の詳細については、http://www.quirksmode.org/js/events_order.htmlを参照してください。

+0

Mozillaはこれを実践してもそれをサポートしていません。そのため、互換性の面では最高の解決策ではありません。 –

+0

@dudelgrincen - MootoolsやjQueryのような抽象レイヤーを使用してブラウザの違いを処理する場合はそうです。 –

1

これらの要素に同じ名前を付けて整理すると、getElementsByNameを使用して配列に配置できます。その後、配列をループし、各要素にリスナーを追加することができます。

関連する問題