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.

click me

Here's the HTML code:

<div id="e83301">click me</div>

Here's the JavaScript code:

const ff = ((e) => { = "yes"});

const ele = document .getElementById("e83301");

ele.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”.)


node.addEventListener(event_name, function_name)

Adds a event handler.

event_name is a string representing a event.

function_name is a function that will be called when the event happens.

The event handler function function_name 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?]


node.removeEventListener(event_name, function_name)

List of Event Names

DOM How-To

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

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog