How to add an event handler in JavaScript

How to add an event handler in JavaScript

To add an event handler to an HTML element, you can use the addEventListener() method of the element object.

The addEventListener() method attaches an event handler to the specified HTML element without overwriting the existing event handlers.

Let us say you have the following button with an ID #clickMe:

<button id='clickMe'>Join Now</button>

To attach a click event handler to the above button, you can use the following example:

// Define an event handler function
const handler = (e) => {
    console.log('Button is clicked!');
};

// Attach event handler to button
const btn = document.querySelector('#clickMe');
btn.addEventListener('click', handler);

As you can see above, we first defined an event handler function and then use the addEventListener() method to attach it with the element.

The addEventListener() accepts up to three parameters. The first parameter is the name of the event you want to listen for, like click, change, mouseover, and so on. The second parameter is the function that you want to call when the event occurs. The third parameter is an optional boolean value indicating whether you want to use event bubbling or event capturing.

If you are not interested in reusing the event handler function, you could also use an anonymous function as an event handler:

const btn = document.querySelector('#clickMe');
btn.addEventListener('click', (e) => {
    console.log('Button is clicked!');
});

Adding multiple event handlers to the same element

The addEventListener() method allows you to add any number of events to the same HTML element, without overwriting existing events.

// Define first handler
const handler = (e) => {
    console.log('Button is clicked!');
};

// Define second handler
const anotherHandler = (e) => {
    console.log('Button is clicked!');
};

// Attach both event handlers to the same button
const btn = document.querySelector('#clickMe');
btn.addEventListener('click', handler);
btn.addEventListener('click', anotherHandler);

You can also add events of different types to the same element by using the addEventListener() method:

const btn = document.querySelector('#clickMe');

btn.addEventListener('click', (e) => {
    console.log('Clicked!');
});

btn.addEventListener('mouseover', (e) => {
    console.log('Mouse over!');
});

btn.addEventListener('mouseout', (e) => {
    console.log('Mouse out!');
});

Adding an event handler to the window object

The addEventListener() method allows you to add event listeners to any DOM object like HTML elements, the HTML document, and the window object.

For example, here is an event listener that fires when the user scrolls the document:

window.addEventListener('scroll', (e) => {
        console.log('You have scrolled ${window.scrollY}px!');
});

Event bubbling and capturing

Event bubbling and capturing are two ways of event propagation in the HTML DOM. Event propagation defines the order of elements when the event occurs.

Suppose you have a <button> element inside a <p> element, and the user clicks on the <button> element. Which element's click event should be handled first?

<p>
    <button>Subscribe</button>
</p>

In capturing, the outermost element's event is handled first and then the inner. The <p> element's click event will be handled first, and then the <button> element's click event.

In bubbling, the innermost element's event is handled first and then the outer. The <button> element's click event will be handled first, and then the <p> element's click event.

By default, the addEventListener()'s third parameter value is false, that means it uses the bubbling propagation. To use capturing propagation instead, pass the third parameter as true:

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

btn.addEventListener('click', (e) => {
    console.log('Button is clicked!');
}, true);

p.addEventListener('click', (e) => {
    console.log('Paragraph is clicked!');
});

<button id='clickMe'>Join Now</button>

// Define an event handler function
const handler = (e) => {
    console.log('Button is clicked!');
};

// Attach event handler to button
const btn = document.querySelector('#clickMe');
btn.addEventListener('click', handler);

const btn = document.querySelector('#clickMe');
btn.addEventListener('click', (e) => {
    console.log('Button is clicked!');
});

// Define first handler
const handler = (e) => {
    console.log('Button is clicked!');
};

// Define second handler
const anotherHandler = (e) => {
    console.log('Button is clicked!');
};

// Attach both event handlers to the same button
const btn = document.querySelector('#clickMe');
btn.addEventListener('click', handler);
btn.addEventListener('click', anotherHandler);

const btn = document.querySelector('#clickMe');

btn.addEventListener('click', (e) => {
    console.log('Clicked!');
});

btn.addEventListener('mouseover', (e) => {
    console.log('Mouse over!');
});

btn.addEventListener('mouseout', (e) => {
    console.log('Mouse out!');
});

window.addEventListener('scroll', (e) => {
        console.log('You have scrolled ${window.scrollY}px!');
});

<p>
    <button>Subscribe</button>
</p>

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

btn.addEventListener('click', (e) => {
    console.log('Button is clicked!');
}, true);

p.addEventListener('click', (e) => {
    console.log('Paragraph is clicked!');
});

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript