Events are signals fired from within the browser like a keypress, hover or button click etc. Using Javascript we can create event handlers that can get executed once an event is triggered.

Event listeners and event handlers

First, let us define what an event listener and an event handler is and later look at different ways of creating handlers.

Event listeners

An event listener is a code that listens for an event to happen. For example, if you want to wait for a click of a button, you can assign an event listener that will wait for the ‘click’ event to happen.

Event Handlers

An event handler is a block of code that gets executed when an event is fired. For example, when a user clicks a button, we want to hide a element. To perform this operation we can write a function and call it when the click event is fired. This block of code is referred to as an event handler.

const btn = document.querySelector('button');

// Handle the click event
const sayHi = function(event) {
    console.log('Hi! button clicked');
    // code to hide <div> element
};

btn.onclick = sayHi; // listens for the click event & executes once button is clicked

Registering event handlers

There are three ways to register event handlers in Javascript. - addEventListener()
event handler properties and inline event handlers

The addEventListerner() method is the recommended way to register event handlers. However, we will look at all three approaches with examples.

Inline event handler

Suppose we have a button on our HTML page and we want to log a message ‘Hi’ on the console. In the inline event handler, we can directly write the listener code in the HTML. In our case, the listener will be on the button tag.

<button onclick="sayHi()">Click</button> <!-- Event listener -->

// Handle the click event
function sayHi(event) {
    console.log('Hi! button clicked');
};

Event handler properties

Elements that can fire events come with the on event property. For example, properties onclick, onmouseover, onchange etc. These properties are called the event handler properties.

const btn = document.querySelector('button');

// Handle the click event
const sayHi = function(event) {
    console.log('Hi! button clicked');
};

btn.onclick = sayHi; // listens for the click event & executes once button is clicked

In the above example, we have registered an onclick event property on the button. Once the button is clicked, sayHi() function gets executed.

addEventListener() method

The addEventListener method is the recommended way of working with events. Unlike the inline event handler or the event handler properties, the addEventListener() does not assign any event directly on the property of the element. With addEventListener you can specify a listener which is a function that gets called when a specified event is triggered.

addEventListener can add multiple events to a particular element.

const btn = document.querySelector('button');

btn.addEventListener('click', function() {
    console.log('Hi there!');
});