删除事件侦听器，自动创建多个元素 [英] Removing event listeners on automatically created multiple elements

问题描述

我尝试从元素中删除事件监听器，但是我似乎有一个可行的解决方案，但这并不理想，我不知道为什么它与破解的代码不同。 p>

虽然我意识到有更简单的方法来做，这是从一个JS类，我正在努力，所以需要保留一些结构。

这涉及到我所做的一个已经正确回答的帖子（但是当我扩展了这个例子的时候没有工作） - 使用JavaScript中的匿名函数调用删除事件侦听器。

在这个例子中，最后一个创建的div会正确地移除侦听器，但是较早的那个没有（在这里提到 - http： /jsfiddle.net/richwilliamsuk/NEmbd/ ）：

  var ct nr = 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 here - 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）; 
  

最后一个工作正常，但我确信不应该需要监听器数组。也许我担心太多了，但我想知道最佳解决方案。

提前感谢您的帮助，

干杯，
Rich

解决方案

你必须保存每个听众，如果他们不平等，所以你需要一个监听器和元素之间的关系。由于元素由对象（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）; 
} 
  

I'm trying to remove event listeners from elements after they've been clicked on and although I seem to have a working solution, it's not ideal and I'm not sure why it works differently to the broken code.

Although I realise there are simpler ways of doing this, this is taken from a JS class I'm working on so need to retain some of the structure.

This relates to a previous post I made which was answered correctly (but didn't work when I expanded the example) - Removing event listeners with anonymous function calls in JavaScript.

In this example, the last created div removes the listener correctly but earlier ones don't (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();

In the version I got working I create an array which holds all the listeners (fiddle here - 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);​

The final one works fine but I'm sure the listener array shouldn't be necessary. Maybe I'm worrying too much but I'd like to know the optimal solution.

Thanks in advance for your help,

Cheers, Rich

解决方案

You have to save each and every listener if they are unequal, so you need a relation between listener and element. Since an element is represented by an object (DOM: document object model) you can add custom properties to them (although it's not recommended: Can I add arbitrary properties to DOM objects?) (demo):

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);
}

But since your using the same listener in every div its even better not to use a separate function for every div but the same (demo):

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);
}

这篇关于删除事件侦听器，自动创建多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！