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

About

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)

Example

• Javascript: selection of the button

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

Restrictions

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

List

See the handler list section.