javascript remove event listener – Use the removeEventListener() Method to Remove Event Listener in JavaScript

javascript remove event listener | Remove an Event Handler

Contents

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

Also Read This 👉 bootstrap table scroll horizontal and vertical

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.

javascript remove event listener | Remove an Event Handler

javascript remove event listener

How to remove a DOM event listener using Javascript?

JavaScript Event Listeners

Related posts: