/

HTML / CSS / JavaScript Tutorial

JavaScript Document own method: removeEventListener()

[this page | pdf | back links]

The removeEventListener() method (when applied to the document object of the JavaScript DOM) removes (detaches) an event handler to the document.

 

It has the following syntax with the following parameters. It does not return any value.

 

document.removeEventListener(event, function, useCapture)

 

Parameter

Required / Optional

Description

event

Required

String specifying event to remove (excluding the ‘on’ part at the start of the relevant event attribute name)

function

Required

Name of function (without ‘()’ included at end)

useCapture

Optional

If true then event handler is removed from the capturing phase of the page load, if false then removed from the bubbling phase

 

Some earlier versions of some major browsers do not support this method. For these browsers you instead need to use the detachEvent() method. If the event listener was attached two times, once in the capturing and ones in the bubbling phase using the useCapture parameter then it needs to be removed twice as well.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,td,tr,th,caption {border: thin solid black; border-collapse: collapse;}
</style>
</head>
<body>
An event listener that responds to clicking anywhere on the document
is added when the page loads, but after several clicks is removed<br><br>
<table >
  <tr><th>Dom method</th><th>Value returned</th></tr>
  <tr><td>AddEventListener<br>RemoveEventListener</td><td id="x1"></td></tr>
</table>

<script>
document.addEventListener("click", addevent, false)
var x = 0
function addevent() {
  x = x + 1;
  document.getElementById("x1").innerHTML = "<b>clicked " + x + "</b>";
  if (x>=3) {
    document.removeEventListener("click", addevent);
  }
}
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodDomRemoveEventListener() {
  return !!document.removeEventListener;
}


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile