To understand the removeEventListener() method, first the user must have an idea of the addEventListener() method. In the addEventListener() method, an event is attached with this method to perform the operations. On the other hand, the removeEventListener() method is utilized to remove an event. This guide provides a deep insight into the removeEventListener() method in JavaScript.
How to Use the removeEventListener() Method in JavaScript?
If a user wants to disable a button after one click, they can use the removeEventListener() method. The syntax of the removeEventListener() method is as follows:
Syntax
The parameters that are used in the above syntax are listed here:
- event: identifies the event to be removed.
- function: represents the remove function.
- capture: specifies true and false according to the outcome; the default value is false.
Example 1
An example is adapted in which the removeEventListener() method is utilized to remove an event that has been added by the addEventListener() method. In this example, two arguments are required. One argument specifies the name of the event, while the other is a function that is associated with the event listener.
Code
<body style = "text-align:center;">
<center>
<p> Welcome to JavaScript World</p>
<p>An example to use the removeEventListener() method </p>
<button onclick="removeHandler()" id="myBtn">Try Magic Button to fix it</button>
<p id="Id"></p>
<script>
if (document.addEventListener) {
document.addEventListener("mousemove", magicFunction);
} elseif (document.attachEvent) {
document.attachEvent("onmousemove", magicFunction);
}
functionmagicFunction() {
document.getElementById("Id").innerHTML = Math.random();
}
functionremoveHandler() {
if (document.removeEventListener) {
document.removeEventListener("mousemove", magicFunction);
} elseif (document.detachEvent) {
document.detachEvent("onmousemove", magicFunction);
}
}
</script>
</body>
</html>
The description of the above code is enlisted here:
- First, the addEventListener() method is used to attach a mousemove event named magicFunction.
- The addEventListener is triggered if the movement of the mouse is detected. Otherwise, it attaches an attachEvent event to generate continuous random numbers.
- After that, the magicFunction() method is utilized to generate the random numbers with the Math.random() method.
- In the end, a custom removeHandler() method is used in which removeEventListener() is called to remove the event that generates the random number. Otherwise, a detach event is triggered to pause the number.
Output
The output returns a display in the chrome window using the removeEventListener() method. In this display, random numbers are continuously generated that are associated with mouse movement. A button is attached here named “Try Magic Button to fix it”. It is used to fix the randomly generated number.
Example 2
Another example is followed here by utilizing the removeEventListener() method. The code is as follows:
Code
<center>
<p> Welcome to JavaScript World</p>
<p>Another example to use the removeEventListener() method </p>
<button id="click">Magic Button</button>
</center>
<script>
let btn = document.getElementById('click');
const clicked = (e) => {
alert('User pressed the Magic Button');
btn.disabled=true; // Disable the button
btn.removeEventListener('click', clicked)
}
btn.addEventListener('click', clicked)
</script>
</body>
In the code, the removeEventListener() method is utilized with a button. The id of the button is passed to the removeEventListener() method, which will remove the event when the button is pressed.
Output
Before clicking the button:
After clicking the button:
After clicking the Magic Button, an event is called that generates a pop-up window in the web browser.
Conclusion
The removeEventListener() method is utilized to remove the already added event in JavaScript. To practice this method, you must add an event using the addEventListener() method in JavaScript. After that, the removeEventListener() method can be called to remove that event. Here, you have learned the working and usage of the removeEventListener() method in JavaScript with the help of basic as well as advanced examples.
