如何在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+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.