addEventListener不是'工作不正常

addEventListener isn't working properly

本文关键字：工作 不正常 不是 addEventListener      更新时间：2023-09-26

我想在两个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（）。

相关文章：