Javascript DOM HTML Document removeEventListener() Method

Introduction

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

Click the button to remove the event handler.

This document has an onmousemove event handler that displays a random number every time you move your mouse in this document.

View in separate window 

<!DOCTYPE html>
<html>
<body>
<button onclick="removeHandler()">Test</button>
<p id="demo"></p>

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

function myFunction() {/*from w  ww . j a  v  a2  s.  c  om*/
  document.getElementById("demo").innerHTML = Math.random();
}

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

</body>
</html>

The document.removeEventListener() method removes an event handler that has been attached with the document.addEventListener() method.

To remove event handlers, the function added by addEventListener() method must be an external, "named" function.

Anonymous functions, like 

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

will not work.

Use the element.addEventListener() and element.removeEventListener() methods to add/remove event handlers to/from a specified element. 

document.removeEventListener(event, function);

Parameter Values

Parameter
 Description
event

 Required.
The name of the event to remove.
function

 Required.
Specifies the function to remove.
useCapture




 Optional.
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 document.removeEventListener() method return No value.




PreviousNext

Related