当从数组中读取时JavaScript没有移除监听器

下面我有一个小的JavaScript文件，用于为数组中的每个数组创建元素。除了最后一个功能removeEventListeners()，所有的工作都很好。此函数不返回任何错误，但它不会删除侦听器。当从数组中读取时JavaScript没有移除监听器

真的很感谢任何帮助！谢谢。

var array = [["Bob", 17, 1], ["Alan", 16, 1], ["Dave", 19, 1], ["Terry", 5, 1], ["Janet", 23, 0]]; 
var elements = []; 
var AGE = 1; 

function createHandler(i) { 
    return function() { 
    // Upon clicking the element show an alert with the age of that element (taken from array) 
    alert(array[i][AGE]); 
    } 
} 

for (var i = 0; i < array.length; i++) { 
    elements[i] = document.createElement("div"); 
    elements[i].addEventListener("click", createHandler(i), false); 
} 

// This function is where the problem lies - it doesn't remove the handlers 
function removeEventListeners() { 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].removeEventListener("click", createHandler(i), false); 
    } 
}

来源

2013-07-27 jskidd3

这是因为，您将独特的功能对象时，你'add'和'remove'。要删除监听器，需要传递添加时传递的* same *函数对象，这意味着您需要在某处引用它。 –

您可能要考虑的一点是，DOM元素是可以添加属性的对象。如果你只是在存储一个数字，你可以直接将它添加到元素。通过这种方式，不必为每个元素创建唯一的处理程序，您可以命名并重复使用同一个处理程序，因此当您想从元素中删除它时可以引用它。如果添加到元素的属性是'my_index'，那么在处理程序中，您可以执行'array [this.my_index] [AGE]'。我不会引用大量的数据或其他元素，但是像数字这样的小事情并不是什么大不了的事情。 –

的原因是creatHandler总是返回新功能，而不是你连接的相同。您应该存储处理程序并在要删除它们时取回它们。

var handlers = []; 
function createHandler(i) { 
    if (!handlers[i]) { 
     console.log('Created ' + i); 
     handlers[i] = function() { 
      alert(array[i][AGE]); 
     }; 
    } 
    return handlers[i]; 
}

你可以看到在行动太：http://jsfiddle.net/balintbako/TQxua/

来源

2013-07-27 15:25:24

啊，我明白了。我想我知道你的意思，你会介意给你的答案提供一个例子来确保吗？谢谢 – jskidd3

欣赏编辑。感谢您的回答！ – jskidd3

当从数组中读取时JavaScript没有移除监听器

回答

相关问题