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>
Output:
Similar Reads
How to attach a method to HTML element event using jQuery ? In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will
2 min read
How to attach a click and double-click event to an element in jQuery ? In this article, we will see how to attach a click and double-click event to an element in jQuery. To attach click and double-click events, click and dbclick events are used. These events are attached with the bind() method. This method is used to attach one or more event handlers for selected eleme
1 min read
How to get a notification when an element is added to the page using JavaScript? To show a notification when an element is added to the page we can use the to createElement() method to create an element list with the specified name. Detect element addition dynamically in the DOM using JavaScript. Trigger an alert to notify users upon appending new elements to the page. ApproachT
2 min read
How to bind an event on an element but not on its children in jQuery ? In this article, we will learn how to bind an event on an element but not on its children in jQuery. We want to add an event on the parent element but not on the child element. Approach: We can do this task in the following steps: First, we add a click event on the div element that contains a paragr
2 min read
How to Stop Event Propagation with Inline Onclick Attribute in JavaScript? The stopPropagation() method in the HTML DOM is used to stop an event from propagating (or "bubbling"). This method is particularly useful when using an inline onclick attribute in JavaScript.HTML DOM stopPropagation() Event MethodThe stopPropagation() method is used to stop propagation of event cal
2 min read
How to Stop Event Propagation with Inline Onclick Attribute in JavaScript? The stopPropagation() method in the HTML DOM is used to stop an event from propagating (or "bubbling"). This method is particularly useful when using an inline onclick attribute in JavaScript.HTML DOM stopPropagation() Event MethodThe stopPropagation() method is used to stop propagation of event cal
2 min read