addEventListener가 제대로 작동하지 않습니다.

Question

두 div 사이에 일부 요소를 이동하려고합니다. 모든게 정상적으로 onclick 이벤트와 함께 작동하지만, 내가 으로 swicth 할 때 addEventListener 그것은 단지 몇 번 요소를 전환 할 수 있습니다.

여기는 previev http://jsfiddle.net/2u6nyxp4/1/입니다.

누군가가 왜 그런지 설명 할 수 있습니까? 고맙습니다.

HTML

<div id="one"> 
    <span>One</span> 
    <span>Two</span> 
</div> 

<div id="two"><span>One</span></div> 

JAVASCRIPT

var one = document.getElementById('one'); 
var two = document.getElementById('two'); 

var movetoOne = function() { 
    one.appendChild(this); 
    bindEvents (this,movetoTwo); 
} 

var movetoTwo = function() { 
    two.appendChild(this); 
    bindEvents (this,movetoOne); 
} 

var bindEvents = function (childList, moveEvent) { 
    childList.onclick = moveEvent; 

} 


for (i=0; i < one.children.length ; i+=1) { 
    bindEvents(one.children[i], movetoTwo); 
} 

for (i=0; i < two.children.length ; i+=1) { 
    bindEvents(two.children[i], movetoOne); 
} 

Answer 1

한 번에 이벤트에 대한 하나의 이벤트 핸들러가 oncklick를 사용하는 경우. bindEvents 번으로 전화 할 때마다 이전 버전이 새 것으로 덮어 씁니다.

addEventListener을 사용하는 경우 bindEvents을 호출 할 때마다 새 처리기는 에 기존에이 추가됩니다. 10 번의 클릭 후 동일한 요소에 연결된 movetoOne과 5 개의 movetoTwo 핸들러가 있으며 브라우저가 완전히 혼동됩니다.

방법 아웃 : 그래서 같은 새로운 하나를 추가하기 전에 기존의 핸들러를 제거 :

var bindEvents = function (childList, moveEvent) { 
    var old = movetoOne; 
    if (old === moveEvent) old = movetoTwo;  
    childList.removeEventListener('click', old); 
    childList.addEventListener('click', moveEvent); 
} 

Working DEMO here. - - - Reference: removeEventListener().