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

Devtool Chrome Event Listener


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)


var btn = document.querySelector('button');
  • Javascript: setting of the handler via the onclick idl property
btn.onclick = function() {
   console.log('Ouch !');
  • The HTML button
<button class="btn btn-info">Poke me</button>
  • The result:

Event handler content attribute (On HTML Attributes)

Note that an event handler can also be set via the on HTML attribute


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


See the handler list section.

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 PreventDefault

If you don't want to have the default beahavior (such as following a link), you can prevent it with the event.preventDefault() function. It still allow the event propagation but disable the default action....
Devtool Chrome Event Listener
DOM - Event handler

A event handler is a function that handles the event and gets called with the event occurs
Devtool Chrome Event Listener
DOM - Mouseenter event (in a element) with Javascript

An article about the mousenter event with Javascript examples
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...
Web Browser - Load Event

The load event is fired by the browser. at the Window when the document has finished loading at an fetch element that fetch a resource (e.g. img, embed) when its resource has finished loading as...
Devtool Chrome Event Listener
What are the HTML On Attributes ? (known also as event handler content attributes)

This page is about the HTML attributes that starts with on. They are officially known as the event handler content attributes.
Devtool Chrome Event Listener
What's the mouse leave event and how to use it

The mouseleave events fires when a pointer (mouse or keyboard) leaves an element

Share this page:
Follow us:
Task Runner