Event Handler

Event handlers can be used to handle and verify user input, user actions, and browser actions: Things that should be done every time a page loads. Things that should be done when the page is closed. Action that should be performed when a user clicks a button.

Event handlers are embedded in documents as attributes of HTML tags to which you assign JavaScript code to execute. The general syntax is

<TAG eventHandler=”JavaScript Code”>

where TAG is some HTML tag and eventHandler is the name of the event handler.

For example, suppose you have created a JavaScript function called compute. You can cause Navigator to perform this function when the user clicks on a button by assigning the function call to the button’s onClick event handler:

<INPUT TYPE=”button” VALUE=”Calculate” onClick=”compute(this.form)”>

There are many different types of events that can occur.

For example:

• The user selects, clicks, or hovers the cursor over a certain element.
• The user chooses a key on the keyboard.
• The user resizes or closes the browser window.
• A web page finishes loading.
• A form is submitted.
• A video is played, paused, or finishes.
• An error occurs.

To react to an event, you attach an event handler to it. This is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires. When such a block of code is defined to run in response to an event, we say we are registering an event handler. Note: Event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.

const btn = document.querySelector(‘button’);

function random(number) {
return Math.floor(Math.random() * (number+1));
}

btn.addEventListener(‘click’, () => {
const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
document.body.style.backgroundColor = rndCol;
});

In this code, we store a reference to the <button> element inside a constant called btn, using the Document.querySelector() function.

HTML event handler attributes

Assigning event handlers using HTML event handler attributes are considered as bad practices and should be avoided as much as possible because of the following reasons:

First, the event handler code is mixed with the HTML code, which will make the code more difficult to maintain and extend.

Second, it is a timing issue. If the element is loaded fully before the JavaScript code, users can start interacting with the element on the webpage which will cause an error.

For example, suppose that the following showAlert() function is defined in an external JavaScript file:

<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML  

And when the page is loaded fully and the JavaScript has not been loaded, the showAlert() function is undefined. If users click the button at this moment, an error will occur.

DOM Level 0 event handlers

Each element has event handler properties such as onclick. To assign an event handler, you set the property to a function as shown in the example:

let btn = document.querySelector('#btn');

btn.onclick = function() {
alert('Clicked!');
};

Code language: JavaScript

In this case, the anonymous function becomes the method of the button element. Therefore, the this value is equivalent to the element. And you can access the element’s properties inside the event handler:

let btn = document.querySelector('#btn');

btn.onclick = function() {
alert(this.id);
};

Code language: JavaScript

Output:

btn

By using the this value inside the event handler, you can access the element’s properties and methods.

To remove the event handler, you set the value of the event handler property to null:

btn.onclick = null;

Code language: JavaScript

The DOM Level 0 event handlers are still being used widely because of its simplicity and cross-browser support.

DOM Level 2 event handlers

DOM Level 2 Event Handlers provide two main methods for dealing with the registering/deregistering event listeners:

• addEventListener() – register an event handler
• removeEventListener() – remove an event handler

Summary

• There are three ways to assign an event handler: HTML event handler attribute, element’s event handler property, and addEventListener().
• Assign an event handler via the HTML event handler attribute should be avoided.