Element removeEventListener() Method - Javascript DOM

Javascript examples for DOM:Element removeEventListener

  1. HOME
  2. Javascript
  3. DOM
  4. Element removeEventListener

Description

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

Parameter Values

Parameter Description
event Required. event name.
function Required. function to remove.
useCapture Optional.

Possible values for useCapture:

  • true - Removes the event handler from the capturing phase
  • false - Default. Removes the event handler from the bubbling phase

If the event handler was attached twice, one with capturing and one bubbling, each must be removed separately.

Return Value:

No return value

The following code shows how to Remove a "mousemove" event that has been attached with the addEventListener() method:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from  w  ww .ja v a2 s  .com*/
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV">mouse your mouse here.
  <p>Click the button to remove the DIV's event handler.</p>
  <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>

Related Tutorials