JavaScript: 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) { evt.target.innerHTML = "You are on me!"}
function f2 (evt) { evt.target.innerHTML = "Move your mouse on me!"}

var 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.

dom eventflow
DOM event flow http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture

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 JavaScript: 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

Basic DOM Methods Topic

  1. JavaScript: Basic DOM Methods
  2. JavaScript: Get Elements by ID, Tag, Name, Class, CSS Selector
  3. JavaScript: Get Element's Attribute Value
  4. JavaScript: Set Element's Attribute Value
  5. JavaScript: List/Add/Remove Class Attribute
  6. JavaScript: Node Type, Node Name, Node Value
  7. JavaScript: Navigate DOM Tree
  8. JavaScript: Add / Remove Event Handler
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.