The actions which an user or a browser do, such as loading a web-page, changing a field in a form, a button click, are all called events. In JavaScript these 'events' can be associated with functions that are named event handlers or simply handlers. The 'handlers' will react to the action or actions done on a web-page. 

When an event occurs, the handlers can be evoked directly on an action, or by utilizing event listeners, simply called listeners. Introduced as a part of DOM level 2, the listeners are considered to be subscriptions that call dedicated handlers in the moment of an event occurring.

NOTE: Handlers and listeners are frequently used interchangeably as synonyms for the functions that are handling events.

Example list of events that can occur in a webpage: 

  • onclick – Triggers when an user clicks on an element.
  • onkeypress – Triggers when an user press a key.
  • onload – Triggers when a page loads.
  • onerror – Triggers when there is an error when loading a document (window, media...).
  • onblur – Triggers when an element loses focus.

HTML Event Handlers

When an event occurs on an HTML element, they can be associated with handlers in following ways:

Example

<button id=”btn” onclick=”alert(‘Clicked button!!’)”>Click Me </button>

in the example above the Javascript coded is inline the element. When the button is clicked, the alert message is displayed. This is suitable for small actions definitions. However it is not a good coding practice to mix JavaScript and HTML codes inline.

Better way of using JavaScript for event triggers:

<button onclick=”functionName()”> click me</button>

<script>

function functionName(){

      //Code here

}

</script>

When, in the example above, the HTML element button is clicked, the action to be executed is in functionName. The ‘functionName’ is defined in JavaScript and can be in same file or an external file. 

The uniqueness of this method of event handling is that it creates a local variable called event which is passed to the function definition without passing it as an argument. This carries the event’s target element which caused the function call. Remember that also the members of the document and the element itself can be accessed without being passed as arguments.

The disadvantages of this approach are the tight coupling between HTML and JavaScript; any change to the function has to be made on both sides. The event handler may be called even before the function is defined, leading to an error.

Example of an event handler

Event handlers in DOM 0

The traditional way of assigning handlers to events is retrieving reference of HTML elements and assigning handlers to them. The events and actions are all defined in script by calling the id of the HTML element. In this method any property of the HTML element can be accessed using this keyword. When the event handler has to be removed, it can be assigned a ‘null’ here. This approach is still popularly used due to cross-browser functionality.

Syntax for event handlers in DOM 0

<button id=”btn”>Click here</button>
<script>
    document.getElementById(“btn”).onclick = function(){
        //Code here
        alert(this.id); //Output : btn
}
btn.onclick = null;
</script>

 

›› go to examples ››