In JavaScript, an event is defined as a state change of an object. When a browser performs specific actions, the HTML comprises various events that trigger functions. When JavaScript is embedded within HTML and granted permission to execute, it responds to the occurrence of these events.
An event handler associated with a specific event can be detached from an element by utilizing the native JavaScript method removeEventListener. For instance, if a button is set to a disabled state after it has been clicked once, you can employ removeEventListener to eliminate the click event listener from that button.
The removeEventListener function is applicable in situations where an event has been triggered and there has been some form of user engagement with that event. However, you may wish to cease the event's response to user actions after a certain condition has been met.
Syntax
The syntax below utilizes the JavaScript removeEventListener function to eliminate the event handler.
element.removeEventListener(event, handler);
element.removeEventListener(event, handler, useCapture);
Parameters: The method requires two default parameters and one optional parameter. The parameter and its specifications are displayed below:
- Event: This string identifies the type of event or event name that must be eliminated.
- Handler: The job of the event handler is to eliminate.
- UseCapture: it is a parameter that is optional. By default, it has the Boolean value false, which indicates that the event handler should be removed from the bubbling phase. If it is useCapture value sets to true, however, the removeEventListener method should be used to remove the event handler from the capture phase.
- By default, it has the Boolean value false, which indicates that the event handler should be removed from the bubbling phase.
- If it is useCapture value sets to true, however, the removeEventListener method should be used to remove the event handler from the capture phase.
Examples
The subsequent examples demonstrate how to utilize the remove event listener with various events and corresponding handlers.
Example 1: Remove the click event of the button
The fundamental illustration demonstrates the usage of the JavaScript method removeEventListener in conjunction with an event. Upon the initial click of the button, an alert dialog appears. Subsequently, the event functionality is terminated using this method, effectively disabling both the event and its associated handler. As a result, the alert dialog does not appear upon subsequent clicks of the button.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type = "text/css">
#data {
background-color: orange;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<button id = "data_btn"> Click Here </button>
<script>
const btn_value = document.querySelector('#data_btn');
function button_func(event) {
alert("Done, Remove event after Function activate!");
//Remove the event listener, and after that alert tab does not pop up.
btn_value.removeEventListener("click", button_func);
}
//Activate the function once to remove the event
btn_value.addEventListener("click", button_func);
</script>
</body>
</html>
Output:
The output illustrates the functionality of the button designed to attach and detach click events.
Before removing the event handler output
After removing the event handler output
Example 2: Remove the mousemove event
The illustration demonstrates the property of the div element regarding the orange background color. By default, the mouse move event is enabled on the webpage. Once the function is triggered by clicking, the mouse move event ceases to operate and presents the most recent value displayed on the page.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: orange;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information"> </p>
<p id = "information1">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mousemove", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mousemove event
// mousemove event is disabled
btn_value.removeEventListener("mousemove", button_func);
document.getElementById("information1").innerHTML = "removes event handler functionality from capturing on the web page";
}
</script>
</body>
</html>
Output:
The output demonstrates the functionality of the button that allows for the addition and removal of the mouse move event. The accompanying image illustrates the result following the removal of the event handler.
Example 3: Remove the mouseover event
In this scenario, we assigned a mouseover event to an element. When the user starts hovering over that specific element, the intention is for the event to terminate. To eliminate the mouse hover event, we utilized removeEventListener on the button element.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: lightgreen;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method with mouseover event </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the mouse over functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mouseover", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mouseover event
// mousemove event is disabled
btn_value.removeEventListener("mouseover", button_func);
document.getElementById("information").innerHTML = "removes event handler functionality on the web page";
}
</script>
</body>
</html>
Output:
The displayed output illustrates the functionality of the button for adding and removing the mouseover event.
Example 4: Eliminate mouseover event utilizing true useCapture
In this illustration, we demonstrate the utilization of an element in conjunction with a mouseover event and the useCapture parameter. When the user initiates hovering over that element, the intention is to terminate the event. If the useCapture parameter is assigned a value of "true," the event will be momentarily removed, allowing the function to restart.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: yellow;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mouseover", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mouseover event
// mousemove event is disabled
btn_value.removeEventListener("mouseover", button_func, true);
document.getElementById("information").innerHTML = "removes event handler functionality from bubbling on the web page";
}
</script>
</body>
</html>
Output
The output demonstrates the functionality of the button to add and eliminate the mouseover event.
Before removing the event handler output
After removing the event handler output
Example 5: Eliminate mouse move event utilizing false for useCapture
In this illustration, we demonstrate an element alongside a mouseover event that utilizes the useCapture parameter. When a user starts to hover over this element, the intention is to terminate the event. If the useCapture parameter is assigned a value of "false," the event is briefly removed, allowing the function to initiate once more. By default, this parameter is set to false; however, the operational functionality is observable.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: orange;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mousemove", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mousemove event
// mousemove event is disabled
btn_value.removeEventListener("mousemove", button_func, false);
document.getElementById("information").innerHTML = "removes event handler functionality from capturing on the web page";
}
</script>
</body>
</html>
Output
The output illustrates the functionality of the button that enables the addition and removal of the mouse move event.
Before removing the event handler output
After removing the event handler output
Web Browsers Supported
The list of supported browsers for the removeEventListenert method of javascript is as follows:
- Google Chrome 1.0
- Firefox 1.0
- Edge 9.0
- Safari 1.0
- Opera 7.0
Conclusion
When you have established an event and certain events are operating continuously, the method removeEventListener is utilized to cease that functionality.