javascript remove event listener – Use the removeEventListener() Method to Remove Event Listener in JavaScript
javascript remove event listener | Remove an Event Handler
The removeEventListener() method is used to remove an event listener which were attached by addEventListener() method.
var element_name = document.querySelector('#btn');
var flag = 0;
var counter = function(event) {
flag++;
if(flag == 2){
this.removeEventListener('click', someEventHander);
}
}
element_name.addEventListener('click', counter);
javascript remove event listener
var myHandler=function(event){
console.log("do something");
}
//add listener
document.getElementById("someid").addEventListener('click',myHandler);
//remove listener
document.getElementById("someid").removeEventListener('click',myHandler);
How to remove a DOM event listener using Javascript?
<html>
<head>
<script>
const reverseString = (str) => {
return str.split("").reverse().join("");
};
const form = document.querySelector("form");
const displayReverseString = (event) => {
event.preventDefault();
const inputValue = event.target["message"].value;
document.querySelector("#result").textContent = reverseString(inputValue);
};
form.addEventListener("submit", displayReverseString);
const disableFormButton = document.querySelector("#disable-form-button");
disableFormButton.addEventListener("click", () => {
form.removeEventListener("submit", displayReverseString);
});
</script>
</head>
<body>
<h1>String Reverser</h1>
<form>
<label for="message">Enter message</label>
<input placeholder="e.g. Man" type="text" id="message" name="message" />
<button type="submit">Reverse</button>
</form>
<div>
<h5>Output</h5>
<div id="result"></div>
</div>
<button id="disable-form-button">Disable form</button>
</body>
</html>
JavaScript Event Listeners
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Event Listner - www.pakainfo.com</title>
</head>
<body>
<button id="contactButton">Contact Me</button>
<script>
// Defining custom functions
function primaryFunction() {
alert("The primary function executed successfully!");
}
function mainPartFunction() {
alert("The mainPart function executed successfully");
}
// Selecting button element
var btn = document.getElementById("contactButton");
// Assigning event handlers to the button
btn.onclick = primaryFunction;
btn.onclick = mainPartFunction; // This one overwrite the primary
</script>
</body>
</html>
Don’t Miss : JQuery Disable OnClick Event Listeners
Remove Event Listeners
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript remove Event Listner - www.pakainfo.com</title>
</head>
<body>
<button id="button">Click Me</button>
<script>
function welcomeMessage() {
alert("welcome Message!");
}
var button = document.getElementById("button");
button.addEventListener("click", welcomeMessage);
button.removeEventListener("click", welcomeMessage);
</script>
</body>
</html>
I hope you get an idea about javascript remove event listener.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.