JavaScript Basics

JavaScript Advanced

JavaScript Arrays

JavaScript Functions

JavaScript Objects

JavaScript DOM

JavaScript String

How to add an event handler to an HTML element in JavaScript?

Each HTML element has a method called addEventListener() that allows you to register an event handler that will be invoked whenever a specific event occurs. In simple terms, you use an event handler to execute code when a particular event occurs.

htmlElement.addEventListener(event, eventHandler);

An event can be click, keydown, etc.

eventHandler is the function that is called when an event occurs. It can be an anonymous function or just a normal function.

Let's understand the entire process of adding an event handler to an HTML element with the help of an example:

Suppose there is a button, and you want to display a popup whenever a user clicks on that button.

<button id="btn">Click Me</button>

To attach an event listener to that button, you have to select that button using the document.getElementById(), document.querySelector(), or methods like this.

let btn = document.getElementById('btn');

After that, call the addEventListener() method on the selected button. Pass 'click' as the first argument and an anonymous function as the second parameter.

btn.addEventListener('click', function(event){
  alert('button is clicked');

If you click on the button, a popup will be displayed.

Note: If you want to use the event handler method elsewhere, then use a normal JavaScript function.

let btn = document.getElementById('btn');

function eventHandler(event){
  alert('button is clicked');
btn.addEventListener('click', eventHandler);

Recommended Posts