javascript remove event listener – How to remove a DOM event listener using Javascript?

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

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.