JavaScript：删除事件侦听器

我正在尝试删除侦听器定义中的事件侦听器：

canvas.addEventListener('click', function(event) {
    click++;
    if(click == 50) {
        // remove this event listener here!
    }
// More code here ...

我怎么能这么做？此=事件。。。

---

谢谢。

如果@Cybernate的解决方案不起作用，请尝试将触发器断开到它自己的函数中，以便您可以引用它

clickHandler = function(event){
  if (click++ == 49)
    canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);

---

您需要使用命名函数

另外，

click

变量需要在处理程序之外才能递增

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       // to remove
       canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

---

编辑：您可以关闭

单击计数器

变量，如下所示：

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

// to add
canvas.addEventListener('click', myClick);

通过这种方式，可以跨多个元素递增计数器

---

如果您不希望这样，并且希望每个计数器都有自己的计数器，请执行以下操作：

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick( 0 ));

---

EDIT:我忘记了在上两个版本中返回的处理程序的名称。已修复。

我认为您可能需要提前定义处理程序函数，如下所示：

var myHandler = function(event) {
    click++; 
    if(click == 50) { 
        this.removeEventListener('click', myHandler);
    } 
}
canvas.addEventListener('click', myHandler);

let click = 0;
canvas.addEventListener('click', function abc(event) {
    click++;
    if (click >= 50) {
        // remove event listener function `abc`
        canvas.removeEventListener('click', abc);
    }
    // More code here ...
}

这将允许您按名称从自身中删除处理程序

   canvas.addEventListener('click', function(event) {
      click++;
      if(click == 50) {
          this.removeEventListener('click',arguments.callee,false);
      }

我应该这样做

element.querySelector（'.addDoor'）.onEvent（'click'，函数（e）{}）；
element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();


HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
    this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};


HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
    for (var i = 0; i < this.myListeners.length; i++) {
        this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
    };
   delete this.myListeners;
};
};

元素.querySelector（'.addDoor'）.RemovelListeners（）；
HTMLElement.prototype.OneEvent=函数（eventType、回调、useCapture）{
addEventListener（事件类型、回调、useCapture）；
如果（！this.myListeners）{
this.myListeners=[]；
};
this.myListeners.push（{eType:eventType，callBack:callBack}）；
归还这个；
};
HTMLElement.prototype.RemovelListeners=函数（）{
if（this.myListeners）{
for（var i=0；i

您可以使用命名函数表达式（在本例中，函数名为

abc

），如下所示：

var myHandler = function(event) {
    click++; 
    if(click == 50) { 
        this.removeEventListener('click', myHandler);
    } 
}
canvas.addEventListener('click', myHandler);

let click = 0;
canvas.addEventListener('click', function abc(event) {
    click++;
    if (click >= 50) {
        // remove event listener function `abc`
        canvas.removeEventListener('click', abc);
    }
    // More code here ...
}

快速而肮脏的工作示例：

---

有关命名函数表达式的更多信息：。

如果有人使用jquery，他可以这样做：

var click_count = 0;
$( "canvas" ).bind( "click", function( event ) {
    //do whatever you want
    click_count++;
    if ( click_count == 50 ) {
        //remove the event
        $( this ).unbind( event );
    }
});

希望它能帮助别人。

---

请注意@user113716给出的答案很好：）

试试这个，它对我有用

<button id="btn">Click</button>
<script>
 console.log(btn)
 let f;
 btn.addEventListener('click', f=function(event) {
 console.log('Click')
 console.log(f)
 this.removeEventListener('click',f)
 console.log('Event removed')
})  
</script>

点击
控制台日志（btn）
让f；
btn.addEventListener（'click'，f=函数（事件）{
console.log（'单击'）
控制台日志（f）
此.removeEventListener（'click'，f）
console.log（'事件已删除'）
})  

这太酷了！有关

参数的文档。被调用方

对于感兴趣的各方：谢谢，这很有帮助。不幸的是，这不适用于ECMAScript 5（2009）或更高版本，来自MDN链接：“第五版ECMAScript（ES5）禁止在严格模式下使用

参数。被调用方（）

。避免使用

参数。被调用方（）

给函数表达式一个名称，或者在函数必须调用自身的地方使用函数声明。”（虽然它使用了

callee（）

而不是

callee

，但它仍然被删除，boo！）+1-我把它做成了一把小提琴，但它不起作用。但那是因为我需要点击50次：）我真是个白痴。这里有一个简单的例子：@karim79：我希望我能说我以前从未做过这样的事情o） 谢谢你的jsFiddle.+1第三个选项对我很有用。将关键事件分配给输入字段以清除验证。很好的一票，这里的第三个选项是理解JS绑定/解除绑定的重要部分

myClick=function（event）{…}

是否也被视为命名函数？很简单，但对于将来的参考

if（click==50）{

应该是

if（click==50）

或者

if（click>=50）

-它们不会更改输出，但出于理智的原因，这些检查更有意义。好问题……如果我无法访问内容，如何删除它？我想在其他网站上使用greasemonkey删除onclick on按钮的弹出窗口，但除非我能按名称引用该函数，否则我似乎找不到删除它的方法。