删除 JavaScript 中的事件侦听器

本教程教授如何在 JavaScript 中删除事件侦听器。

使用 removeEventListener() 方法删除 JavaScript 中的事件监听器

如果我们创建了一个元素并且我们不希望它在用户与其交互时执行其预期的行为，我们必须从该元素中删除事件侦听器。我们通过使用 JavaScript 的内置函数 removeEventListener() 来实现这一点。此函数从元素中删除附加的事件侦听器并停止其预定义的操作。我们可以通过删除附加到按钮的事件侦听器来禁用对按钮的单击。

该函数接受以下参数：

1. type：它是一个字符串，指定我们要为其删除事件侦听器的用户操作的类型。
2. listener：我们要从所述元素中删除的事件侦听器函数。
3. options：这是一个可选参数，有助于指定事件侦听器的特征。可以设置以下选项：
   • capture：它是一个布尔变量，表示在移动到 DOM 树中的任何目标事件之前，事件将转到注册的侦听器。
   • mozSystemGroup：一个布尔变量，指示事件监听器将被添加到系统组中。它仅适用于在 XBL/Firefox 的 chrome 中运行的代码。
4. useCapture：它是一个布尔变量，表示事件侦听器是否为捕获侦听器。它也是一个可选参数。

var element_name = document.querySelector('#btn');
var count = 0;
var counter = function(event) {
    count++; 
    // perform the intended function in case of occurence of event 
    if(count == 2){
        this.removeEventListener('click', myHandler);
    } 
}
element_name.addEventListener('click', counter);

在上面的代码中，我们添加了一个事件监听器，并指定了监听器被触发时要执行的函数。如果用户再次尝试触发相同的侦听器，我们将使用 removeEventListener() 删除事件侦听器。我们通过首先选择要在其上添加/删除事件侦听器的元素来实现此目的。然后，我们初始化一个计数器来维护点击次数的计数。最后，我们声明要触发的事件处理程序并增加计数。如果用户单击两次，则触发 removeEventListener()。