DOM: Add / Remove Event Handler

By Xah Lee. Date: . Last updated: .

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

Here's a simple mouse over event.

Move your mouse on me!

Here's the HTML code:

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

Here's the JavaScript code:

function f1 (evt) { = "You are on me!"}
function f2 (evt) { = "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”.)


The method “addEventListener” takes 3 arguments.

dom eventflow
DOM event flow

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, [see JS: What's “this” in a event handler?]


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

List of Event Names

Basic DOM Methods Topic

  1. DOM: Basic DOM Methods
  2. DOM: Get Elements by ID, Tag, Name, Class, CSS Selector
  3. DOM: Get Element's Attribute Value
  4. DOM: Set Element's Attribute Value
  5. DOM: List/Add/Remove Class Attribute
  6. DOM: Node Type, Node Name, Node Value
  7. DOM: Navigate DOM Tree
  8. DOM: Add / Remove Event Handler
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon