如何在JavaScript中移除事件处理程序？

一个事件被定义为对象状态的改变。在HTML中有很多事件，这些事件显示用户或浏览器何时执行特定操作。JavaScript在JavaScript代码嵌入到HTML中并允许执行时响应这些事件。

响应事件的过程称为事件处理。因此，JavaScript使用事件处理程序来处理HTML事件。

在本文中，我们将讨论如何在JavaScript中移除事件处理程序。在这里，我们使用removeEventListener()方法从JavaScript中的元素中移除事件处理程序。

使用removeEventListener()方法

JavaScript内置函数removeEventListener()从与之关联的事件的元素中移除事件处理程序。例如，如果按钮在单击一次后被禁用，您可以使用removeEventListener()来移除单击事件监听器。

例如，如果您创建了一个事件，并且用户与该事件进行了一些交互，但您想在某些特定情况下阻止事件对用户的反应，在这种情况下，您可以使用removeEventListener()方法。

语法

以下是removeEventListener()方法的语法。

element.removeEventListener(event, listener, useCapture)

示例1

移除按钮事件

在这个例子中，我们使用removeEventListener()函数来移除分配给HTML元素的事件。在下面的场景中，我们为按钮元素分配了一个事件监听器，并且我们禁用了该事件以防止用户双击按钮。

<html>
<body>
   <button id="punch">Punch it!</button>
   <script>
      let button = document.getElementById("punch");
      function func(event) {
         alert("Done, You've punched the button!");
         button.disabled = true; // disable button
         button.removeEventListener("click", func); // remove event listener
      }
      button.addEventListener("click", func);
   </script>
</body>
</html>

单击按钮后，将弹出警示框。

单击“确定”按钮后，将移除事件。

示例2

以下是另一个移除按钮事件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Remove an event handler</title>
   <div id="add">
      <input type="button" onclick="removeHandler()" value="remove" />
   </div>
   <p id="random"></p>
</head>
<body>
   <script>
      let content = document.getElementById("add");
      content.addEventListener("mousemove", myFunction);
      function removeHandler() {
         content.removeEventListener("mousemove", myFunction);
      }
      function myFunction() {
         document.getElementById("random").innerHTML = Math.random();
      }
   </script>
</body>
</html>

示例3

移除鼠标悬停事件

在这个例子中，我们将mouseover事件分配给一个元素。用户开始悬停在该元素上并希望停止该事件。因此，我们在按钮元素上实现了removeEventListener()来消除鼠标悬停事件。

<!DOCTYPE html>
<html>
<body>
   <h1 id="hovereffect">Do hover on this text here.</h1>
   <h3>To remove the hovering effect, use this button!</h3>
   <button id="click_me" onclick="RemoveAfterClick()">Click me</button>
   <b id="effect"></b>
   <script>
      const a = document.getElementById("hovereffect");
      a.addEventListener("mouseover", MouseOverEffect);
      function MouseOverEffect() {
         document.getElementById("effect").innerHTML +=
            "mouseover Event happened because you hovered !!" + "<br>";
      }
      function RemoveAfterClick() {
         a.removeEventListener("mouseover", MouseOverEffect);
         document.getElementById("effect").innerHTML +=
            'You just hit the "click me" button' + "<br>" +
            "Now, the mouseover event is disabled. !!";
      }
   </script>
</body>
</html>

将鼠标悬停在文本“将鼠标悬停在此处”上后，每当鼠标悬停时，它将开始打印如下所示。

现在，单击“单击我”按钮以移除鼠标悬停事件。

示例4

移除onmousemove事件

在这个例子中，我们创建了一个div元素，并在其上分配了onmousemove。并将Math.random()传递到该div元素中。因此，每当鼠标指针移动到该特定div元素中时，都会出现一些数字。为了阻止用户这样做，我们创建了一个按钮并向其传递removeEventListener。这样，每当我们单击该按钮时，它就会停止显示随机数。

<!DOCTYPE html>
<html>
<style>
   #Box {
       background-color: #808000;
       padding: 10px;
    }
</style>
<body>
   <h3>Removing onMouseEvent</h3>
   <div id="Box"> When you move the mouse withinthis Green box, an onmousemove event handler shows a random number.
      <p>To stop this onmousemove event, Just click the button below </p>
   </div>
   <br>
   <button onclick="removeEvent()">Stop event!</button>
   <p id="para"></p>
   <script>
      const Box = document.getElementById("Box");
      Box.addEventListener("mousemove", func);
      function removeEvent() {
         Box.removeEventListener("mousemove", func); // Will stop the event
      }
      function func() {
         document.getElementById("para").innerHTML = Math.random(); //Math.random() will give random numbers
      }
   </script>
</body>
</html>

单击“停止事件”后，Math.random()函数将停止。

更新于：2023年10月25日

29K+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告