在JavaScript中调用匿名函数删除事件侦听器 [英] Removing event listeners with anonymous function calls in JavaScript

问题描述

我正在尝试删除已创建的span元素的事件侦听器，其中调用的函数在闭包内。我尝试了各种方法，没有一个似乎工作。

  var MyClass = function（）{} 
 
 MyClass.prototype.addSpan = function（el）{
 var span = document.createElement（'span'）; 
 span.innerHTML =Text here; 
 el.appendChild（span）; 
 span.addEventListener（'click'，（function（obj）{
 return function（）{
 obj.removeSpan（）; 
} 
}） ），false）; 
} 
 
 MyClass.prototype.removeSpan = function（）{
 alert（'removal span'）; 
 this.removeEventListener（'click'，arguments.callee，false）; 
 // ... remove span .... 
} 
 
 myclass = new MyClass（）; 
 
 myclass.addSpan（document.getElementById（'box'））; 
  

我也使用了

  this.removeEventListener（'click'，（function（obj）{
 return function（）{
 obj.removeSpan（）; 
} 
 }）（this），false）; 
  

代替 this.removeEventListener（'click'，arguments.callee，

>解决方案

  var MyClass = function（）{} 
 MyClass.prototype.listener = null; 
 MyClass.prototype.addSpan = function（el）{
 var span = document.createElement（'span'）; 
 span.innerHTML =Text here; 
 el.appendChild（span）; 
 span.addEventListener（'click'，（function（obj）{
 return obj.listener = function（）{
 obj.removeSpan（this）; // this'this' 'span'
} 
}）（this），false）; 
} 
 
 MyClass.prototype.removeSpan = function（el）{
 alert（'removal span'）; 
 el.removeEventListener（'click'，this.listener，false）; 
 // ... remove span .... 
} 
 
 myclass = new MyClass（）; 
 myclass.addSpan（document.getElementById（'box'））; 
  

没有监听器的引用，你不能删除它，所以我也添加了一个属性（listener）到MyClass的原型，然后返回引用 return obj.listener ，还需要传递对象，因为我已经传递 obj.removeSpan（this）; ，并在 removeSpan 中收到 el 所以我可以做 el.removeEventListener ，希望它有帮助。

p>

  var MyClass = function（）{this.listener = null;} 
  

而不是

  MyClass.prototype.listener = null; 
  

这里是 example 。

I'm trying to remove an event listener for created span elements where the function called is within a closure. I've tried various methods and none seem to work.

var MyClass = function () {}

MyClass.prototype.addSpan = function (el) {
    var span = document.createElement('span');
    span.innerHTML = "Text here";
    el.appendChild(span);
    span.addEventListener('click', (function (obj) { 
        return function () { 
            obj.removeSpan(); 
        }
    })(this), false);
}

MyClass.prototype.removeSpan = function () {
    alert('removing span');
    this.removeEventListener('click', arguments.callee, false);
    // .... remove span .... 
}

myclass = new MyClass();

myclass.addSpan(document.getElementById('box'));

I've also used

this.removeEventListener('click', (function (obj) { 
    return function () { 
        obj.removeSpan(); 
    }
})(this), false);

in place of this.removeEventListener('click', arguments.callee, false); but had no luck.

Any help is much appreciated!

解决方案

var MyClass = function () {}
MyClass.prototype.listener=null;
MyClass.prototype.addSpan = function (el) {
    var span = document.createElement('span');
    span.innerHTML = "Text here";
    el.appendChild(span);
    span.addEventListener('click', (function (obj) { 
        return obj.listener = function () { 
            obj.removeSpan(this); // here 'this' refers to 'span'
        }
    })(this), false);
}

MyClass.prototype.removeSpan = function (el) {
    alert('removing span');
    el.removeEventListener('click', this.listener, false);
    // .... remove span .... 
}

myclass = new MyClass();
myclass.addSpan(document.getElementById('box'));

Without a reference of the listener you can't remove it, so I've also added a property (listener) to the MyClass' prototype and then returned the reference as return obj.listener and also you need to pass the object as I've passed it obj.removeSpan(this); and in the removeSpan I've received with el so I could've done el.removeEventListener, hope it helps.

You can also do this

var MyClass = function () {this.listener=null;}

instead of

MyClass.prototype.listener=null;

Here is an example.

这篇关于在JavaScript中调用匿名函数删除事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！