如何删除 JavaScript 事件侦听器？

Question

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

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

我怎么能这么做呢？这=事件...

Answer 1

您需要使用命名函数。

此外，

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

---

您可以像这样关闭

click_counter

变量：

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

Answer 2

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

应该这样做。

Answer 3

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

abc

），如下所示：

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 ...
}

快速而肮脏的工作示例：http://jsfiddle.net/8qvdmLz5/2/.

有关命名函数表达式的更多信息：http://kangax.github.io/nfe/.

Answer 4

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

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

Answer 5

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

Answer 6

看起来没有人涵盖当前 JavaScript DOM 规范的一部分，该规范为您提供了一种机制，可以使用 removeEventListener 删除事件监听器

而不

。如果我们查看 https://dom.spec.whatwg.org/#concept-event-listener，我们会发现有许多属性可以传递来控制事件监听：

{
  type (a string)
  callback (null or an EventListener object)
  capture (a boolean, initially false)
  passive (a boolean, initially false)
  once (a boolean, initially false)
  signal (null or an AbortSignal object)
  removed (a boolean for bookkeeping purposes, initially false) 
}

现在，该列表中有很多有用的属性，但为了删除事件侦听器，我们要使用的是

signal

属性（已于 2020 年底添加到 DOM 级别 3 ） ，因为它让我们发送一个中止信号并让 JS 完成剩下的工作，而不需要将我们的事件处理函数保存在某个地方，然后使用与我们注册监听器完全相同的参数组合调用 removeEventListener

：

const controller = (new AbortController()).signal;

canvas.addEventListener('click', () => {
  click++;
  if (click === 50) {
    controller.abort();
  } else {
    doSomethingWith(click);
  }
}, {
  // register our 
  signal: controller
});

（请注意，这不使用

useCapture

 标志，因为 useCapture 标志本质上完全没用）

完成：一旦

controller.abort()

 被调用，JS 引擎将中止并清理我们的事件监听器，而不必使用与我们调用 

removeEventListener

 完全相同的函数和属性来调用 

addEventListener

：只需取消监听器即可。

Answer 7

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

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

这将允许您通过名称从其内部删除处理程序。

Answer 8

如果有人使用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 给出的答案效果很好:)

Answer 9

实现这一点的一种方法是使用jquery，所以你可以使用：

canvas.click(yourfunction); 然后您可以使用以下方法分离所有事件侦听器：

canvas.off();

Answer 10

试试这个，它对我有用。

<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>