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)