DOM - Event handler

Devtool Chrome Event Listener


An event handler registers:

They are known as:

A event handler in the DOM is not the standard definition of a event handler (ie a function that handle an event) because:

  • you can also just register raw code (ie not a function)
  • there is only one handler by element and a event type


Event handlers can be define in the following ways.

On Attribute

You can register the code that will handle the event with:

  • the on attributes
  • aka attributes Event handler
  • aka inline event handlers
  • aka content event handlers


<button class="btn btn-info" onclick="console.log('Ouch !');">Poke me</button>

More .. What are the HTML On Attributes ? (known also as event handler content attributes)

They are less recommended because they mix up HTML and JavaScript:

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

Javascript Property (Idl)

DOM Event Handler - On Properties with Javascript (Interface Definition Language - IDL )


document.querySelector('button').onclick = function() {
   console.log('Ouch !');
<button class="btn btn-info">Poke me</button>

Because this is a property, only one function can be defined. If more than one function should be triggered for instance for the click above, you should add another event listener

Jquery on

Jquery on is a wrapper that permits to register event handler.

<button id="my-name-is" class="btn btn-info" role="button">My Name is</button>
<div id="my-name" class="alert alert-info" hidden >
var hiddenBox = $( "#my-name" );

$( "#my-name-is" ).on( "click", function( event ) {;



An event handler has a name, which always starts with on and is followed by the type of the event for which it is intended. Ref

See the list in the event type page

Not all HTML element will respond to event handler. For example, only media elements will ever receive a volumechange event fired by the user agent.


The value is the code that will run when the event occurs.

The value is:

Initially, the value is set to null. When a value is set, a listener is created.


The event listener registration / creation happens when the value is being set to a non-null value.

When setting a value, an event handler creates implicitly only one event listener. Setting multiple handler definition for the same pair of element and a event type will execute only the last definition.


let button = document.querySelector('button')
button.onclick = function () { console.log("IDL handler"); }; 
button.setAttribute("onclick", "console.log('Attribute Handler')"); 
  • The HTML code
<button>Execute the handler by clicking</button>
  • Result: The below button will only execute the last handler definition (which is via the HTML attribute)


See the list in the event type page

While event handlers apply to all HTML elements, they are not useful on all HTML elements.

For example, only media elements will ever receive a volumechange event fired by the user agent.

Documentation / Reference

Discover More
Devtool Chrome Event Listener
DOM - Click Event (OnClick)

1001 ways to handle a the click event. The click event occurs when the pointing device button is clicked over an element. The onclick on attribute may be used with most elements. A click is a mousedown...
Devtool Chrome Event Listener
DOM - Event

This section is the management of action in the Document object model (ie in the browser) An event allows for signaling that something has occurred, e.g., that an image has completed downloading. Event...
Devtool Chrome Event Listener
DOM - Event Callback Function (Attach function to Event)

An event callback is a callback function that is executed when a event is fired. The Event callback function can be added / defined through: the setting of an event handler on.... such as onclick ...
DOM - Event Delegation

Event delegation in the DOM
Devtool Chrome Event Listener
DOM - Event Listener

An event listener is an object that executes code for an event An event listener observe a specific event and consists of: type (a string, the event name) callback (null or an EventListener object)...
DOM - Event Propagation (known as Event Bubbling)

event propagation is a mechanism in which an event is propagated to all its ascendant (ancestore). Any time one of anchor tags is clicked, a click event is fired for that anchor, and then...
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
DOM Event - Keydown

A Keydown is an input device event that tracks when a key goes down on the keyboard. keyup You can attach it to all element. This is also possible to create advanced accesskey (ie...
Devtool Chrome Event Listener
DOM Event Handler - On Properties with Javascript (Interface Definition Language - IDL )

An IDL event handler is a way to define an event handler for one element via the on javascript properties known as the Interface Definition Language (IDL) (ie defined in the object interface, in the code)...
Devtool Chrome Event Listener
DOM event - focus (onfocus)

This page is the focus event. ie how to register a callback function to handle this event focus means that a HTML element becomes active. blur Focus Event Type Inheritance (bubble) Description...

Share this page:
Follow us:
Task Runner