JavaScript_javascript スキルのイベント バインディングに関する簡単な説明

実際のところ、それは必要な他の友人の便宜のためであり、ベテランが好きなだけ雑談しているとしか思えません。 。
本題に入る前に、ウォーミングアップとして質問しましょう。
次の HTML 構造があります:

コードをコピーします コードは次のとおりです。

および次の JavaScript コード:

コードをコピー コードは次のとおりです:

var Wrap = document.getElementById('wrap') ,
inputs = Wrap.getElementsByTagName( 'input');

for (var i = 0, l = inputs.length; i inputs[i]. onclick = function () {
alert (i);
}
}

すみません、この実行の結果はどうなりますか?
/*****************************区切り線*************** ******* **********/
あなたの答えが「ボタンがクリックされたときに、現在のボタンのインデックス値 i を警告する」である場合、あなたは私の罠にはまっています。どのボタンをクリックしてもアラート(5)が表示されるので、試してみるとよいでしょう。

この一見当然の結果が実際の状況と異なるのはなぜでしょうか?実際、それは簡単に理解できます。
onclick はイベント バインディングだけであり、実行ではないため、onclick イベントを実行すると、この時点で i はすでにループ後の値になっているため、各ボタンがalert(5) するだけでは不十分です。奇妙な。

では、「ボタンがクリックされたときに、現在のボタンのインデックス値 i を通知する」をどのように実装するのでしょうか?ここでは、JavaScript の隠れた謎である「クロージャ」という概念を使用する必要があります。クロージャを使用して上記の JS を書き換えて、for ループの i 値をメモリに保存できます。コードは次のとおりです。

コードをコピーします。 🎜> コードは次のとおりです。

var Wrap = document.getElementById('wrap'),
inputs = Wrap.getElementsByTagName('input'); 🎜>
for (var i = 0, l = inputs.length; i (function (cur) {
inputs[cur].onclick = function () {
アラート (cur);
} }
})(i)
}

エフェクトをもう一度試しますか?
確かに、対応するインデックス値をアラートすることができますが、これまでのところそれは単なる前菜であり、本題はまだ始まったばかりです。 上記のメソッドでは、ループ クロージャを通じてイベントをボタンにバインドしています。JavaScript の関数もオブジェクトであり、オブジェクトがメモリを占有することはわかっています。この例では、ボタンが 5 つしかないのではないかと思われるかもしれません。パフォーマンスのオーバーヘッドは無視できますが、ボタンが 50 個、さらには 500 個ある場合、他のパフォーマンス リスクが同時に発生すると、IE はすでに泣き叫ぶことになります。
先ほどの例に戻ると、「イベント委任」メソッドを使用して、ボタンの増加に伴うバインドされたイベントの増加によって発生する可能性があるこのパフォーマンスの問題を解決できます。原理は非常に簡単です。JavaScript のイベント バブリングを使用すると、ボタンの数に関係なく、共通の親要素が 1 つだけあるため、イベントをバインドする必要があるのは 1 回だけです。その上で。

コードは次のとおりです:

コードをコピーしますコードは次のとおりです:

var Wrap = document.getElementById('wrap'),
inputs = Wrap.getElementsByTagName('input');

wrap.onclick = function (ev) {
var ev = ev window.event,
target = ev.target || ev.srcElement;
for (var i = 0, l = inputs.length; i if（inputs [i] ===ターゲット）{もう少し深く掘り、デザートを持っています。
クロージャー イベント バインディングに対するイベント委任のパフォーマンス上の利点に加えて、イベント委任は子要素 (つまり、イベントがバインドされる要素) の数を考慮する必要がありません。たとえば、onclick イベントをバインドした後、
によってボタンが追加されます。

コードをコピーします

コードは次のとおりです。次のように:

var newInput = document.createElement('input'); newInput.setAttribute('type', 'button'); , 'Button six '); wrap.appendChild(newInput); このコードのクロージャーメソッドとイベント委任メソッドも最後に追加されていることがわかります。クロージャによって実装されます。「ボタン 6」をクリックしても効果はありませんが、イベント デリゲートに実装されたイベント バインディングを通じて「ボタン 6」をクリックするとアラートが発生します。逆に、ボタンを削除したい場合、クロージャ メソッドは削除されたボタンの onclick イベントを (手動で null に設定しない限り) メモリに保存し、イベント デリゲートがメモリに不必要な負担を与えることはありません。このため、イベント委任をもっと活用して、複数の要素を同じレベルでバインドする必要もあります。