删除自动创建的多个元素上的事件侦听器

Question

[我试图从元素上单击后删除事件侦听器，尽管我似乎有一个可行的解决方案，但它并不理想，我不确定为什么它与损坏的代码不同。

尽管我知道有更简单的方法，但这是从我正在研究的JS类中提取的，因此需要保留一些结构。

这与我先前发表的文章有关，该文章已正确回答（但在我扩展示例时不起作用）-Removing event listeners with anonymous function calls in JavaScript。

在此示例中，最后创建的div正确删除了侦听器，但较早的div却没有（在这里-http://jsfiddle.net/richwilliamsuk/NEmbd/摆弄：]]

var ctnr = document.getElementById('ctnr');
var listener = null;

function removeDiv (d) {
    alert('testing');
    d.removeEventListener('click', listener, false);
}

function addDiv () {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    ctnr.appendChild(div);
    div.addEventListener('click', (function (d) { return listener = function () { removeDiv(d); } })(div), false);
}

addDiv();
addDiv();
addDiv();
在我使用的版本中，我创建了一个包含所有侦听器的数组（在此处为小提琴-http://jsfiddle.net/richwilliamsuk/3zZRj/：]

var ctnr = document.getElementById('ctnr');
var listeners = [];

function removeDiv(d) {
    alert('testing');
    d.removeEventListener('click', listeners[d.id], false);
}

function addDiv() {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    ctnr.appendChild(div);
    div.id = listeners.length;
    div.addEventListener('click', (function(d) {
        return listeners[listeners.length] = function() {
            removeDiv(d);
        }
    })(div), false);
}


addDiv();
addDiv();
addDiv();

document.getElementById('btn').addEventListener('click', function() {
    alert(listeners);
}, false);​
最后一个可以正常工作，但是我确定没有必要使用监听器数组。也许我太担心了，但我想知道最佳解决方案。

我正在尝试从元素上单击后删除事件监听器，尽管我似乎有一个可行的解决方案，但这并不理想，我不确定为什么它与损坏的监听器不同...

Answer 1

如果每个侦听器不相等，则必须保存每个侦听器，因此您需要在侦听器和元素之间建立关系。由于元素由对象（DOM：文档对象模型）表示，因此可以向其添加自定义属性（尽管不建议使用：Can I add arbitrary properties to DOM objects?）（demo）：

Answer 2

[是的，您不需要数组，只需将每个侦听器保存在一个变量中，而不是在remove（）函数中传递eventlistener，