Event Listeners

JavaScript event listeners allow us to execute a function when a specific event happens on an HTML element.

What are Event Listeners?

An event listener waits for a particular event to occur and then executes a function when that event happens.

JavaScript commonly uses addEventListener() to attach an event handler to an element.

Simple Definition

Element → Event Listener → Event Occurs → Function Executes

Event listener flow: an event occurs on an element and the registered function responds to it.

addEventListener() Syntax

element.addEventListener("event", function);

The first argument specifies the event type, while the second argument specifies the function that should execute when the event occurs.

Event Listener Flow

How addEventListener() Works

HTML Element

→

Event Listener
addEventListener()

→

Event
click / input

→

Function
Executes

Example 1: Click Event Listener

The following example represents a click event listener. The CIIT compiler example uses an object to demonstrate the event information, because the compiler executes JavaScript console code.

const listener = {
    element: "Button",
    event: "click",
    action: "Button clicked"
};

console.log("Element:", listener.element);
console.log("Event:", listener.event);
console.log("Action:", listener.action);

Element: Button
Event: click
Action: Button clicked

Example 2: Input Event Listener

An event listener can also respond when the value of an input field changes.

const listener = {
    element: "Name Input",
    event: "input",
    value: "Rahul"
};

console.log("Element:", listener.element);
console.log("Event:", listener.event);
console.log("Value:", listener.value);

Element: Name Input
Event: input
Value: Rahul

Example 3: Multiple Event Listeners

Multiple event listeners can be associated with different events.

const listeners = [
    {
        event: "click",
        action: "Button clicked"
    },
    {
        event: "input",
        action: "Text entered"
    },
    {
        event: "change",
        action: "Value changed"
    }
];

console.log("Event 1:", listeners[0].event);
console.log("Event 2:", listeners[1].event);
console.log("Event 3:", listeners[2].event);

Event 1: click
Event 2: input
Event 3: change

Example 4: Event Listener with Function

The listener can call a function when the event occurs.

function showMessage() {
    return "Welcome to CIIT Training Institute!";
}

const listener = {
    event: "click",
    functionName: "showMessage"
};

console.log("Event:", listener.event);
console.log("Function:", listener.functionName);
console.log("Message:", showMessage());

Event: click
Function: showMessage
Message: Welcome to CIIT Training Institute!

Example 🌍🤓

Event listeners are widely used in login forms, registration forms, buttons, menus, search boxes, validation, and interactive web applications.

const loginButton = {
    element: "Login Button",
    event: "click",
    action: "Validate Login"
};

console.log("Element:", loginButton.element);
console.log("Event:", loginButton.event);
console.log("Action:", loginButton.action);

Element: Login Button
Event: click
Action: Validate Login

Important Note

addEventListener() is normally used with browser DOM elements such as buttons, input fields, forms, links, and other HTML elements.

The CIIT JavaScript compiler is console-based, so the Try It examples above use JavaScript objects and functions to demonstrate the same event-listener concept without depending on document or browser DOM APIs.

Summary

JavaScript event listeners allow us to respond to user actions and other events. The addEventListener() method is commonly used to register a function for an event such as click, input, or change.