如何在 JavaScript 中创建一次性事件？

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

一次性事件：这些事件只执行一次事件侦听器。假设我们创建了一个按钮并添加了一个点击事件。如果它只执行一次，我们将创建一个一次性事件，而不管用户是否多次单击按钮。

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

方法：我们为按钮添加一个事件监听器，然后使用removeEventListener()函数从该按钮中删除事件。所以以这种方式事件监听器只执行一次它的指令。

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

事件侦听器每次从用户那里侦听该侦听器时都会执行其功能。假设“单击”，因此每当用户单击该特定按钮时，它每次都会开始执行相同的指令。

例子：

Javascript

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

输出：

一次性事件监听器创建：我们使用removeEventListener() 仅在执行一次后删除事件侦听器。即使在多次单击按钮后它也不会执行，因为事件侦听器已从按钮中删除。

例子：

HTML

    
    
       
    
      body{
      text-align:center;
      }
    


    GeeksforGeeks
   
    
        One time event
        
          Submit
    
    

 

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

输出：