JavaScriptを使用したイベントデリゲート

Question

"onmouseover"イベントを追加するdivのリストがあります。私は、要素のリストを反復処理しようとすると、このように「onmouseover属性」の機能を再定義：ページの読み込みが完了した後、それはこの非常に最後の要素に適用されますように見えます、残念ながら

for (var i=0; i<3; i++) { 
    elements[i].onmouseover = function() { alert('FOO') }; 
} 

。あなたが行うことができますhttp://jsfiddle.net/qajPM/

Answer 1

問題は、あなたがこのようなあなたのdiv要素のすべてを作成しているということですすでに関連付けられているイベントハンドラはありません）、そのたびにparent divのinnerHTML全体を新しい文字列で上書きしています。つまり、テキストコンテンツに効果的に追加していますが、既に設定したmouseoverハンドラが壊れています。既に存在するものに影響を与えることなく、新しい要素を追加し

var el = document.createElement("div"); 
el.innerHTML = i; 
parent.appendChild(el); 

：

ではなく、このような何かを試してみてください。

更新デモ：http://jsfiddle.net/qajPM/1/

Answer 2

一つのことがあるの代わりに割り当てる：

はここに私の問題を示す優れた例です...私は、これは本当の初心者の質問であると確信しているが、私はまだそれを考え出したていませんイベントハンドラを divに割り当てると、親にハンドラを1つ割り当てて、イベントターゲットに基づいて divがマウスオーバーしたかどうかを取得することができます。

HTML：

<div id="parent"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div> 

Javascriptを：

document.getElementById('parent').onmouseover = function(e) { 
    var target = e.target || e.currentTarget; 
    alert('Target ' + target.innerHTML + ' was moused over'); 
}; 

フィドル：他人としてhttp://jsfiddle.net/ZhpLA/

が、これはあなたが必要とするすべての場合にjQueryのにもかかわらず、（これはわずかに少ないコードを持っています指摘していますそれは無意味だろう）：

$('#parent').on('mouseover', 'div', function(e) { 
    alert('Target ' + e.currentTarget.innerHTML + ' was moused over'); 
}); 

上記のjQueryコードの利点は、現在との将来の子divの#parentの両方に適用されるということです。プログラム的に追加する場合は、mouseoverイベントを引き続き使用することができます。私はあなたがそれがparent.innerHTML = parent.innerHTML + ...と同等である知っていると確信しているが、.innerHTMLプロパティが（文字列としてHTMLを返したよう

parent.innerHTML += "<div> " + i + "</div>" 

：