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

Question

我试图在点击元素后从元素中删除事件监听器，虽然我似乎有一个可行的解决方案，但它并不理想，而且我不确定为什么它的工作方式与损坏的代码不同。

虽然我意识到有更简单的方法可以做到这一点，但这是从我正在处理的 JS 类中获取的，因此需要保留一些结构。

这与我之前发表的一篇帖子有关，该帖子得到了正确的回答(但在我扩展示例时不起作用)- Removing event listeners with anonymous function calls in JavaScript .

在这个例子中，最后创建的 div 正确地移除了监听器，但之前的没有(fiddle here - 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();

在我开始工作的版本中，我创建了一个包含所有监听器的数组(此处 fiddle - 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

你是对的，你不需要数组，只需将每个监听器保存在一个变量中，而不是在你的 remove() 函数中传递 eventlistener，

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

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

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


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

document.getElementById('btn').addEventListener('click', function() {
    alert(listeners);
}, false);​​

updated jsfiddle page