How to attach an event to an element which should be executed only once in JavaScript ?

Last Updated : 01 Jun, 2023

In this article, we will learn how to attach an event to an element which should be executed only once. There are two approaches that can be used here:

Approach 1: In this approach, we will be using the jQuery one() method. This method attaches an event to the element with the specified selector. It is named one because the event handler corresponding to the event is only executed once. A button with a class of event-handler-btn is defined in the following example and the event is attached to this particular element. When the button is clicked, an alert message is displayed. Any subsequent clicks after the first click will not work as the event handler is executed at most once per element and per event type as discussed above.

Syntax:

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

Example: In this example, we are using the above-explained approach in which we use jQuery one() method.

HTML

<!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>

Output:

Approach 2: In this approach, we will be using the jQuery on() and off() methods. The on() method also attaches an event to the element with the specified selector but the difference is that the event handler is executed whenever the button with the class of event-handler-btn is clicked, not one time as discussed in the previous approach with the one() method. When the button is clicked, an alert message is displayed. Any subsequent clicks after the first click will not work as we are explicitly calling the off() method within the on() method on the same element using the this object in jQuery. This means that the off() method negates the on() method as the off() method removes the event listener from that particular element. Hence, the event listener is only executed once.

Syntax:

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

Example: In this example, we are using the above-explained approach.

HTML

<!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>