如何将事件附加到应该在 JavaScript 中只执行一次的元素？

在本文中，我们将学习如何将事件附加到应该只执行一次的元素上。这里可以使用两种方法：

方法 1：在这种方法中，我们将使用 jQuery one() 方法。此方法将事件附加到具有指定选择器的元素。之所以命名为 one，是因为事件对应的事件处理程序只执行一次。下面的示例中定义了一个带有event-handler-btn类的按钮，并且该事件附加到该特定元素。单击该按钮时，将显示一条警告消息。第一次单击后的任何后续单击都将不起作用，因为如上所述，每个元素和每个事件类型最多执行一次事件处理程序。

句法：

$(".event-handler-btn").one("click", function (e) {
    // Code to be executed once
});

例子：

HTML



  

    
  
    
    

  

    GeeksforGeeks

HTML



  

    
  
    
    

  

    GeeksforGeeks

输出：

方法 2：在这种方法中，我们将使用 jQuery on() 和 off() 方法。 on()方法还使用指定的选择器将事件附加到元素，但不同之处在于，只要单击具有event-handler-btn类的按钮，就会执行事件处理程序，而不是像前一种方法中讨论的那样一次使用one()方法。单击该按钮时，将显示一条警告消息。第一次单击后的任何后续单击都将不起作用，因为我们在 jQuery 中使用this对象在同一元素上显式调用on()方法中的off()方法。这意味着off()方法否定on()方法，因为off()方法从该特定元素中删除事件侦听器。因此，事件监听器只执行一次。

句法：

$(".event-handler-btn").on("click", function (event) {
    // Code to be executed once
    $(this).off(event);
});

例子：

HTML



  

    
  
    
    

  

    GeeksforGeeks

输出：