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

Question

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

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

这与我之前的一篇帖子有关，该帖子得到了正确的回答（但在我扩展示例时没有起作用）——用JavaScript中的匿名函数调用删除事件侦听器。

在本例中，上一个创建的div正确地删除了监听器，但之前的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);​​

更新jsfiddle页面

Answer 2

如果每个侦听器不相等，则必须保存它们，因此需要侦听器和元素之间的关系。由于元素是由对象（DOM：文档对象模型）表示的，您可以向它们添加自定义属性（尽管不建议：我可以向DOM对象添加任意属性吗？）（演示）：

var ctnr = document.getElementById('ctnr');
function removeDiv (d) {
    alert('testing');
    d.removeEventListener('click', d.custom_Listener , false);
}
function addDiv () {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    div.custom_Listener = function(){removeDiv(this)};
    ctnr.appendChild(div);
    div.addEventListener('click', div.custom_Listener , false);
}

但是，由于您在每个div中使用相同的监听器，因此最好不要为每个div使用单独的函数，而是使用相同的函数（演示）：

var ctnr = document.getElementById('ctnr');
var listener = function(){
    removeDiv(this);
};
function removeDiv (d) {
    alert('testing');
    d.style.backgroundColor = '#36f';
    d.removeEventListener('click', listener, false);
}
function addDiv () {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    ctnr.appendChild(div);
    div.addEventListener('click', listener , false);
}