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으로 변경하려면 부모에게 하나의 처리기를 할당 한 다음 이벤트 대상에 따라 div이 마우스 오버 되었습니까?

HTML :

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

자바 스크립트 :

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

바이올린 : 다른 사람이 jQuery를 지적으로 http://jsfiddle.net/ZhpLA/이

이 (이 모든 경우에 당신이 필요로하지만 약간 덜 코드가 있습니다 그것은 무의미한 것이다) :

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

위의 jQuery 코드의 장점은 미래 자식 div s의 #parent에 모두 적용된다는 것입니다. 프로그래밍 방식으로 프로그램을 추가하려면 mouseover 이벤트를 계속 사용할 수 있습니다. (난 당신이 그 parent.innerHTML = parent.innerHTML + ...에 해당 알고 확신으로

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

하지만 .innerHTML 속성은 문자열로 HTML을 반환