Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove event handlers in JavaScript?
An event is defined as a change in an object's state. There are a number of events in HTML that show when a user or browser performs a certain action. JavaScript responds to these events when JavaScript code is embedded in HTML and allows execution.
The process of responding to events is known as event handling. As a result, JavaScript uses event handlers to handle HTML events.
In this article, we are going to discuss how to remove event handlers in JavaScript. Here, we use the removeEventListener() method to remove an event handler from an element in JavaScript.
Using the removeEventListener() Method
The JavaScript built-in function removeEventListener() removes an event handler from an element for a connected event. For instance, you can use removeEventListener() to get rid of a click event listener if a button is disabled after one click.
If you created an event and there is some interaction with that event from the user but you want to stop the event to react to the user after some particular case, in those type of situations you can use the removeEventListener() method.
Syntax
Following is the syntax for the removeEventListener() method:
element.removeEventListener(event, listener, useCapture)
Parameters
- event: The event type to remove (e.g., "click", "mouseover")
- listener: The exact function reference that was used with addEventListener()
- useCapture: Optional boolean indicating the capture phase (default: false)
Example: Removing Button Click Event
In this example, we use removeEventListener() function to remove the events assigned to HTML elements. We have assigned an event listener to a button element and disable the event to prevent double clicks from the user.
<html>
<body>
<button id="punch">Punch it!</button>
<script>
let button = document.getElementById("punch");
function func(event) {
alert("Done, You've punched the button!");
button.disabled = true; // disable button
button.removeEventListener("click", func); // remove event listener
}
button.addEventListener("click", func);
</script>
</body>
</html>
After clicking on the button, an alert box will pop up. After clicking on the OK button, the event will be removed and the button will be disabled.
Example: Removing Mouse Move Event
Following is another example of removing a mouse move event:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove an event handler</title>
</head>
<body>
<div id="add">
<input type="button" onclick="removeHandler()" value="remove" />
</div>
<p id="random"></p>
<script>
let content = document.getElementById("add");
content.addEventListener("mousemove", myFunction);
function removeHandler() {
content.removeEventListener("mousemove", myFunction);
}
function myFunction() {
document.getElementById("random").innerHTML = Math.random();
}
</script>
</body>
</html>
Example: Removing Mouseover Event
In this example, we assign a mouseover event to an element. When the user hovers on that element and wants to stop the event, we implement removeEventListener() on a button element to eliminate the mouse hover event.
<!DOCTYPE html>
<html>
<body>
<h1 id="hovereffect">Do hover on this text here.</h1>
<h3>To remove the hovering effect, use this button!</h3>
<button id="click_me" onclick="RemoveAfterClick()">Click me</button>
<b id="effect"></b>
<script>
const a = document.getElementById("hovereffect");
a.addEventListener("mouseover", MouseOverEffect);
function MouseOverEffect() {
document.getElementById("effect").innerHTML +=
"mouseover Event happened because you hovered !!" + "<br>";
}
function RemoveAfterClick() {
a.removeEventListener("mouseover", MouseOverEffect);
document.getElementById("effect").innerHTML +=
'You just hit the "click me" button' + "<br>" +
"Now, the mouseover event is disabled. !!";
}
</script>
</body>
</html>
After hovering on the text "Do hover on this text here", it will start printing a message whenever the mouse gets hovered. Click on the "Click me" button to remove the mouseover event.
Example: Removing Styled Mousemove Event
In this example, we create a styled div element and assign an onmousemove event to it. We pass Math.random() into that div element. Whenever the mouse pointer moves in that particular div element, random numbers appear. To stop this behavior, we create a button with removeEventListener.
<!DOCTYPE html>
<html>
<style>
#Box {
background-color: #808000;
padding: 10px;
}
</style>
<body>
<h3>Removing onMouseEvent</h3>
<div id="Box"> When you move the mouse within this Green box, an onmousemove event handler shows a random number.
<p>To stop this onmousemove event, Just click the button below </p>
</div>
<br>
<button onclick="removeEvent()">Stop event!</button>
<p id="para"></p>
<script>
const Box = document.getElementById("Box");
Box.addEventListener("mousemove", func);
function removeEvent() {
Box.removeEventListener("mousemove", func); // Will stop the event
}
function func() {
document.getElementById("para").innerHTML = Math.random(); //Math.random() will give random numbers
}
</script>
</body>
</html>
After clicking on "Stop event", the Math.random() function will stop generating numbers.
Key Points
- The function reference passed to removeEventListener() must be the exact same function used in addEventListener()
- Anonymous functions cannot be removed since there's no reference to them
- The event type and capture phase must match the original addEventListener call
- Removing a non-existent event listener has no effect and doesn't throw an error
Conclusion
The removeEventListener() method provides a clean way to remove event handlers from DOM elements. This is essential for preventing memory leaks and controlling user interactions in dynamic web applications.
30K+ Views
