Java Reference
In-Depth Information
Removing Event Listeners
An event listener can be removed using the
removeEventListener()
method. To see
an example, add this paragraph to events.htm:
<p id="once">A one time thing</p>
Now add the following code to scripts.js:
once = document.getElementById("once");
once.addEventListener("click", remove);
function remove(event) {
console.log("Enjoy this while it lasts!");
once.style.backgroundColor = "pink";
once.removeEventListener("click",remove);
}
This adds a
click
event listener to a paragraph element, but then removes it in the callback
function named
remove
. This means it will only be called once (try clicking on it again and
nothing happens).
Note: Removal Reference
Note that you cannot use anonymous functions as an argument to
ad-
dEventListener()
if you want to remove it later. This is because there
needs to be a reference to the same function name in the arguments of
re-
moveEventListener()
.
