javascript - javascript 事件触发后无法分离

Question

我使用此结构来创建一次性点击事件:

function structure() {
    this.elements = document.getElementsByClassName('className');
    this.numElements = this.elements.length;

    for(var i = 0; i < this.numElements; i++) {
        this.elements[i].addEventListener('click', this.elementClicked.bind(this));
    }
}

这些事件的处理程序的实现如下:

structure.prototype.elementClicked = function(e) {

    // ... processing event

    for(var i = 0; i < this.numElements; i++) {
        this.elements[i].removeEventListener('click', arguments.callee);
    }
};

这个想法是，如果任何已注册的元素被单击，则触发处理程序一次，然后从每个元素取消注册事件

不幸的是，每次我点击其中一个注册项目时，处理程序仍然会被解雇

我知道匿名函数不能用于引用同一个对象，但指定arguments.callee或引用函数的整个名称仍然没有帮助解决问题

Answer 1

另一种方法是让您的对象实现EventListener接口(interface)。您可以通过将 handleEvent 方法添加到构造函数的 .prototype 中，然后传递对象本身来代替事件处理程序来实现此目的。

function Structure() {
    this.elements = document.getElementsByClassName('className');
    this.numElements = this.elements.length;

    for(var i = 0; i < this.numElements; i++) { // v-- pass the object
        this.elements[i].addEventListener('click', this);
    }
}

// Implement the interface; gets invoked when an event occurs
Structure.prototype.handleEvent = function(e) {
  // Used a switch statement in anticipation of other event types
  switch (e.type) {
  case "click":
    this.elementClicked(e);
    break;
  }
};

Structure.prototype.elementClicked = function(e) {
    // ... processing event

    for(var i = 0; i < this.numElements; i++) { //    v-- pass the object
        this.elements[i].removeEventListener('click', this);
    }
};

现在不再需要使用.bind()。相反，handleEvent 中 this 的值将是绑定(bind)对象。您仍然可以通过 e.currentTarget 获取处理程序绑定(bind)到的元素。