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)


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


Powered by ComboStrap