JS: Add / Remove Event Handler

This page shows you how to add/remove event handler.

Here's a simple mouse over event.

Here's the HTML code:

<div id="abc">Move your mouse on me!</div>

Here's the JavaScript code:

function f1 (evt) { evt.target.innerHTML = "You are on me!"}
function f2 (evt) { evt.target.innerHTML = "Move your mouse on me!"}

let ele = document.getElementById("abc");
ele.addEventListener("mouseover", f1 , false);
ele.addEventListener("mouseout", f2 , false);

This is a simple example of a Event. The event is mouseover. When user moves the mouse over the HTML element, the browser fires the event, then calls the JavaScript function attached to that event. (the function is called the “event handler”.)

addEventListener

The method “addEventListener” takes 3 arguments.

• ① event name. A string.
• ② function. This function will be called when the event fires. This function is called the event handler.
• ③ whether to fire in capture phase (true) or bubbling phase (false). A boolean value. By default, it's false. Some older browser requires this parameter. If 2 elements A and B both have the same event, and B is nested inside A, and if A's event handler has capture true, then A will be fired before B. (“capture” means ancestor element has priority. “bubbling” means children element has priority.)

The event handler function is passed a event object as argument. The element that fired the event can be accessed by the property key "target". That is, event_object.target. 〔►see JS: What's “this” in a event handler?〕

removeEventListener

To remove event handler of a element, use node.removeEventListener(event_name, function_name).

List of Event Names

List of events: https://developer.mozilla.org/en-US/docs/Web/Reference/Events