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 click event.

click me

Here's the HTML code:

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

<p id="outputBox"></p>

Here's the JavaScript code:

const clickBox = document. getElementById("clickBox");

const outputBox = document. getElementById("outputBox");

const ff = (() => { outputBox.textContent = outputBox.textContent + "clicked "});

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

Web Scripting Overview

HTML Input

Web Scripting Examples

Web Scripting Misc



Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials