[英]addEventListener isn't working properly
我想在两个div之间移动一些元素。 一切正常, onclick事件正常,但是当我转至addEventListener时,它使我只需切换几次元素即可。
这是上一个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);
}
在这里工作演示 。 --- 参考:removeEventListener() 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.