How HTML element's attribute event binding\working internally?

Question

I want to know some detailed knowledge about HTML element event mechanism.

For example, we are calling javascript method in HTML's event attributes. How this event attributes handling this events internally.

Answer 1

First, it's about JavaScript API implemented into the browser and not the other way around. While you can either use the onclick="doSomeStuff()" attribute (see examples below), or the addEventListener method, now all methods allow you to bind the handler to an element but there are some little differences.

Method 1 - define your button with onclick attribute then define the handler

You can simply hook a handler to your HTMLElement like so, with the onclick attribute:

<button id="myButton" onclick="doSomeStuff()" type="button">
  Click <span class="my-child-selector">ME</span>
</button>

<script>
function doSomeStuff(){
  element.innerHTML = 'CLICKED ELEMENT';
}
</script>

The <script> tag must always come second, as we don't use DOMContentLoaded event (jQuery(document).ready(callback)). Notice we don't have access to the event object using this method.

Method 2 - define the onclick attribute via JavaScript

Sometimes we write like this, it's a little better way:

<button id="myButton" type="button">
  Click <span class="my-child-selector">ME</span>
</button>

<script>
  // elements
  var element = document.getElementById('myButton'),
    child = element.querySelector('.my-child-selector');

  function doSomeStuff(event) {

    // we have access to the event object
    // get to know the event target
    var target = event.target;

    // respond only when the button element is clicked
    if (target === element) {
      element.innerHTML = 'CLICKED ELEMENT';

      // or delegate to a child
    } else if (target.parentNode === element) {
      element.innerHTML = 'CLICKED CHILD';
    }
  }

  // add listener to your element
  element.onclick = doSomeStuff;

  // alternativelly you can also write an anonymous function
  // element.onclick = function(event){ /* do the stuff with event object access*/ };
</script>

Notice that we now HAVE access to the event object and we can properly delegate the handler.

Method 3 - define the button and attach handler via addEventListener

The new JavaScript API is a miles better way for performance, more flexibility and easier maintenance, basically the BEST way:

<button id="myButton" type="button">
  Click <span class="my-child-selector">ME</span>
</button>

<script>
  // elements
  var element = document.getElementById('myButton'),
    child = element.querySelector('.my-child-selector');

  function doSomeStuff(event) {

    // we have access to the event object
    // get to know the event target
    var target = event.target;

    // respond only when the button element is clicked
    if (target === element) {
      element.innerHTML = 'CLICKED ELEMENT';

      // or delegate to a child
    } else if (target.parentNode === element) {
      element.innerHTML = 'CLICKED CHILD';
    }
  }

  // add listener to your element
  element.addEventListener('click', doSomeStuff, false);
</script>

As an alternative to this method, you can also create an anonymous function as the handler, for unique use cases, when you want a certain behavior for a very specific element.

// add listener to your element
myUniqueElement.addEventListener('click', function (event){
  // do some stuff with access to event object
}, false);

This is just about everything you need to know about handling and delegating events, but feel free to ask anything if you're not certain of something.