DOM - Event Handler

1 - About

A event handler is a function that handles the event and gets called with the event occurs.

Duplicate: It's also known as the event callback function
  • A event handler in the DOM is not the standard definition of a event handler (ie a function that handle an event)
  • A function that handle an event is known in the DOM as the event callback function
  • An event handler for the DOM is just a way to register the callback function (event handler)

An event handler permits to register the callback function (event handler function).

These act as non-capture event listeners for the object on which they are specified.

3 - Properties

3.1 - Name

An event handler has a name, which always starts with on and is followed by the name of the event for which it is intended. See the list on this page: DOM Event - Inline Event Handler (Content handler)

3.2 - Value

An event handler property/attribute can:

  • either have the value null,
  • or be set to a callback function,
  • or be set to an internal raw uncompiled handler.

Initially, event handlers are set to null.

4 - List

5 - Syntax

Event handlers can be define in the following ways.

5.1 - Inline

Event handler HTML attributes (aka inline event handlers) are not recommended because they mix up HTML and JavaScript:

  • Hard to parse
  • Maintenance nightmare
  • No batch mode (only one element at a time)

More .. DOM Event - Inline Event Handler (Content handler)


function ouch() {
   console.log('Ouch !');

<button class="btn btn-info" onclick="ouch()">Poke me</button>

5.2 - Idl

DOM - Event handler - IDL way (Interface Definition Language)


document.querySelector('button').onclick = function() {
   console.log('Ouch !');

<button class="btn btn-info">Poke me</button>

6 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap