addEventListener无法正常工作

问题描述：

我想在两个div之间移动一些元素。一切正常与onclick事件，但是当我swicth到addEventListener它让我切换几次元素。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); 
}

答

如果使用oncklick只有一个事件处理程序在同一时间的事件。每当您拨打bindEvents时，旧的会被新的覆盖。

如果使用addEventListener，每次打电话bindEvents一个新的处理程序是添加现有的。十次点击后，有五个处理程序movetoOne和五个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()。

addEventListener无法正常工作

相关推荐