JavaScript 如何创建一次性事件

在本文中，我们将学习JavaScript中的一次性事件以及如何创建它们。通常我们使用事件监听器来执行任务。例如，如果我们需要计算两个变量的和，可以通过DOM中的按钮点击来完成。这意味着我们使用 click 事件监听器来获取两个变量的和。

一次性事件： 这些事件只执行一次事件监听器。假设我们创建了一个按钮并添加了一个点击事件。如果只执行一次，无论用户点击按钮多少次，我们创建了一个一次性事件。

假设我们创建了一个从API中获取数据的按钮，如果我们没有添加一次性事件，则它在用户每次点击时都会从API中获取数据，忽略之前的响应。因此，这会过载我们的系统，降低性能，并且给用户带来非常糟糕的使用体验。

方法： 我们向按钮添加事件监听器，然后使用 removeEventListener() 函数从该按钮中移除事件。这样一来，事件监听器只执行其指令一次。

如果我们不使用一次性事件监听器会发生什么？

事件监听器每次监听到来自用户的监听器时都会执行其函数。比如说 “click” ，所以每当用户点击特定的按钮时，它都会每次开始执行相同的指令。

示例：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
      body{
      text-align:center;
      }
    </style>
</head>
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
   
    <div class="container"
         style="width:500px;
                margin:auto;
                text-align:center;">
        <h3>One time event</h3>
        <button id="submitBtn"
                type="button"
                style="font-size:large;">
          Submit
        </button>
    </div>
    <script src="script.js"></script>
</body>
 
</html>

JavaScript

let submitBtn = document.getElementById('submitBtn');
 
submitBtn.addEventListener("click",()=>{
    console.log("Executing Everytime");
})

输出：

JavaScript 如何创建一次性事件

一次性事件监听器的创建： 我们使用 removeEventListener() **** 在执行一次后移除事件监听器。由于事件监听器从按钮中被移除，所以即使点击按钮多次，它也不会执行。

示例：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">    
    <style>
      body{
      text-align:center;
      }
    </style>
</head>
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
   
    <div class="container"
         style="width:500px;
                margin:auto;
                text-align:center;">
        <h3>One time event</h3>
        <button id="submitBtn"
                type="button"
                style="font-size:large;">
          Submit</button>
    </div>
    <script src="script1.js"></script>
</body>
 
</html>

JavaScript

// button element  
let submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener("click",func);
 
// function execute when click event fires 
function func() {
    console.log("Event Listener Removed");
     
    /* In "removeEventListener" first argument is event 
       type and second argument is the name of 
       the function that is start executing when
       click event fires */
     
    submitBtn.removeEventListener("click",func);
}