How to use removeEventListener() In Javascript
This method allows us to remove event listeners that were previously added with addEventListener(). Element is the HTML element we want to remove the event listener from, eventType is a string representing the type of event (e.g., “click”, “mouseover”) and eventHandlerFunction is the function that was handling the event and should be removed from listening to the event.
Example 1: The below example uses removeEventListener() to Remove Event Handlers in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Remove Event Listener Example</title>
<style>
h1 {
color: green;
text-align: center;
}
#content {
text-align: center;
margin: 20px;
}
#button-container {
text-align: center;
}
</style>
</head>
<body>
<h1 id="heading">w3wiki</h1>
<div id="content"></div>
<div id="button-container">
<button id="button">Click me!</button>
</div>
<script>
// Get the button element
const button = document.getElementById('button')
// Get the content div
const content = document.getElementById('content')
// Add event listener to button
button.addEventListener('click', handleClick)
// Function to handle button click
function handleClick() {
content.textContent = 'w3wiki is fun'
// Remove event listener from button
button.removeEventListener('click', handleClick)
}
</script>
</body>
</html>
Output:
Example 2: In the below example, the mousemove and click listner is added. With the click of a button, the mousemove listener is removed and hence the mouse location is not tracked further.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Mousemove Event Example</title>
<style>
h1 {
color: green;
text-align: center;
}
#content {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1 id="heading">w3wiki</h1>
<div id="content"></div>
<div id="content">
<button id="button">Click me!</button>
</div>
<script>
// Get the content div
const content = document.getElementById('content');
// Get the button element
const button = document.getElementById('button');
// Function to handle mousemove event
function handleMouseMove(event) {
// Add content below heading when mouse moves
content.textContent =
`Mouse is at X: ${event.clientX}, Y: ${event.clientY}`;
}
// Function to handle button click
function handleClick() {
// Remove mousemove event listener when button is clicked
document.removeEventListener('mousemove', handleMouseMove);
}
// Add mousemove event listener
document.addEventListener('mousemove', handleMouseMove);
// Add click event listener to button
button.addEventListener('click', handleClick);
</script>
</body>
</html>
Output:
How to Remove Event Handlers in JavaScript ?
In JavaScript, event handlers are functions attached to HTML elements to respond to specific events like clicks or mouse movements. Removing event handlers effectively detaches the specified function from listening to that particular event on that element.
Table of Content
- Using removeEventListener()
- Using inline event handlers