JavaScript addEventListener()

addEventListener() is a method in JavaScript that is used to listen for an event on an HTML element.

An event is something that happens on a webpage. For example, a user can click a button, type something in an input box, move the mouse, or submit a form.

Using addEventListener(), we can tell JavaScript what to do when a particular event happens.

Syntax

element.addEventListener("event", function);

There are two main things we provide to addEventListener():

• Event type – the event we want to listen for.
• Function – the code that should run when the event happens.

Example

First, we create a button in HTML:

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

Then we use JavaScript:

const button = document.querySelector("#btn");

button.addEventListener("click", function () {
    console.log("Button clicked!");
});

Here, document.querySelector("#btn") finds the button from the HTML and stores it in the button variable.

Then:

button.addEventListener("click", function () {
    console.log("Button clicked!");
});

tells JavaScript to listen for a click on the button.

When the user clicks the button, the function runs and "Button clicked!" is printed in the console.

How It Works

The process is simple:

User clicks the button
        ↓
Click event happens
        ↓
Event listener detects the event
        ↓
Function runs
        ↓
"Button clicked!" is printed

JavaScript waits for the event. The function does not run immediately. It runs only when the specified event occurs.

Common Events

There are many events that we can listen for.

button.addEventListener("click", function () {
    console.log("Clicked");
});

click runs when the user clicks.

input.addEventListener("input", function () {
    console.log("Typing...");
});

input runs when the value of an input changes while the user is typing.

document.addEventListener("keydown", function () {
    console.log("Key pressed");
});

keydown runs when a keyboard key is pressed.

Some commonly used events are:

• click
• dblclick
• mouseover
• mouseout
• keydown
• keyup
• input
• change
• submit

Example: Changing Button Text

We can also change the webpage when an event happens.

HTML:

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

JavaScript:

const button = document.querySelector("#btn");

button.addEventListener("click", function () {
    button.textContent = "Clicked!";
});

Initially, the button says:

Click Me

After the user clicks it, JavaScript changes the text to:

Clicked!

This happens because the function inside addEventListener() runs after the click.

Why Use addEventListener()?

addEventListener() allows a webpage to become interactive.

Without JavaScript events, a webpage would mostly display information. With event listeners, we can make the webpage respond to the user's actions.

For example:

• Clicking a button can open a menu.
• Typing can update some text.
• Submitting a form can validate the input.
• Moving the mouse can change an element.
• Pressing a keyboard key can trigger an action.

Conclusion

addEventListener() is an important part of JavaScript because it allows us to respond to events that happen on a webpage.

The basic idea is:

element.addEventListener("event", function () {
    // code to execute
});

In simple words:

addEventListener() means "listen for this event, and when it happens, run this function."