Javascript DOM HTML Element removeEventListener() Method

Introduction

Remove a "mousemove" event that has been attached with the addEventListener() method:

Click the button to remove the DIV's event handler.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//www.  j a v  a  2 s  . c  o m
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
}
</style>
</head>
<body>

<div id="myDIV">This div element has an onmousemove event handler.
  <button onclick="removeHandler()" id="myBtn">Test</button>
</div>
<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

The removeEventListener() method removes an event handler attached with the addEventListener() method.

To remove event handlers, the function specified with the addEventListener() method must be an external function.

Anonymous functions, like 

element.removeEventListener("event", function(){ myScript });

will not work. 

element.removeEventListener(event, function, useCapture);

Parameter Values

Parameter
 Description
event
 Required. A String that specifies the name of the event to remove.
function
 Required. Specifies the function to remove.
useCapture Optional.
A Boolean value that specifies the event phase to remove the event handler from.
Possible values:
true - Removes the event handler from the capturing phase
false - Default. Removes the event handler from the bubbling phase

The removeEventListener() method has No return value.




PreviousNext

Related