如何将一个事件附加到一个元素上，而该元素在JavaScript中只需执行一次

在这篇文章中，我们将学习如何将一个事件附加到一个只需执行一次的元素。这里有两种方法可以使用。

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

语法:

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

示例:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 40px;
        }
  
        button {
            cursor: pointer;
            margin: 0 auto;
            display: block;
            margin-top: 2rem;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <button class="event-handler-btn">
        Click to execute event
    </button>
    <script type="text/javascript">
        $(".event-handler-btn").one("click", function (e) {
            alert("GeeksForGeeks!");
        });
    </script>
</body>
  
</html>

输出:

如何将一个事件附加到一个元素上，而该元素在JavaScript中只需执行一次？

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

示例:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 40px;
        }
  
        button {
            cursor: pointer;
            margin: 0 auto;
            display: block;
            margin-top: 2rem;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <button class="event-handler-btn">
        Click to execute event
    </button>
    <script type="text/javascript">
         $(".event-handler-btn").on("click", function (event) { alert("GeeksForGeeks!");$ (this).off(event);
        });
    </script>
</body>
  
</html>

输出:

如何将一个事件附加到一个元素上，而该元素在JavaScript中只需执行一次？