JS: Add/Remove Event Handler
This page shows you how to add/remove event handler.
-
node.addEventListener(eventName, functionName, false)
-
Adds a event handler.
eventName is a string representing a event.
functionName is a function that will be called when the event happens.
The event handler function functionName is passed a eventObject as argument.
The element that fired the event can be accessed by the property key
"target"
. That is,eventObject.target
. [see What is “this” in a event handler?] -
node.removeEventListener(eventName, functionName)
- Remove the function that was attached to the event.
Example
Here is a simple click event.
click me
Here is the HTML code:
<div id="click40667">click me</div> <p id="output28161"></p>
Here is the JavaScript code:
const click40667 = document.getElementById("click40667"); const output28161 = document.getElementById("output28161"); const ff = (() => { output28161.textContent = output28161.textContent + "clicked "}); click40667.addEventListener ("click", ff);
This is a simple example of a Event. The event is "click"
. When user clicks, the browser fires the event, then calls the function attached to that event. (function for this purpose is called the “event handler”.)