2

たとえば、次のように作成された一連のイベント リスナーがあるとします。

var els = document.getElementyById('myList').getElementsByTagName('li');
for (i=0;i<els.length;i++) {
    els[i].addEventListener(eventType, function(e){ /* do stuff */ }, true);
}

まず、私はこのような異端を犯していますか？<li>つまり、各要素のイベント以外に、これを行うためのより簡単な方法はありますか?

<li>どちらの場合も、主な問題は次のとおりです: s が削除/置換された場合、それらのイベント リスナーはどうなりますか? これを行うとどうなりますか：

document.getElementyById('myList').innerHTML = 'Hello World!';

リスナーは「一時停止」したままなので、ブラウザーの速度が低下しますか (sがたくさんあると仮定<li>します)、または自動的に削除されますか? それも問題ですか？

4

1 に答える 1

7

破棄された要素に割り当てられたイベント ハンドラーは、ガベージ コレクションの対象としてマークされます。つまり、メモリから削除されます。また、すべてのイベントが同じことを行う場合は、それらを囲む にバインドします。<ul>クリック イベントは から にバブルアップしliますul。

また、

<li>「各要素のイベント以外に、これを行うためのより簡単な方法はありますか?」

ここでは、含まれている ul 要素にアタッチされた委任ハンドラーを使用するのが理にかなっています。必ずしも単純ではありませんが、わずかに複雑で効率的です。または、li 要素を動的に追加する場合は、より単純になるかもしれません。そして、あなたが心配している問題を完全に回避します。

(@nnnnnn 提供)

質問への回答に役立ったと思われるため、コメントを回答に変換しました。

于 2013-07-10T16:25:30.290 に答える