Click Events

A click event occurs when a user clicks on an HTML element such as a button, link, image, or other interactive element.

What is a Click Event?

The click event is one of the most commonly used JavaScript events.

When a user clicks an element, JavaScript can detect that action and execute a function.

A click on an element can trigger JavaScript code through a click event.

Click Event Flow

Example 1: Basic Click Event

In this example, a function runs when the click event occurs.

function handleClick() {
    console.log("Button clicked!");
}

handleClick();

Example 2: Click Counter

A click event can also be used to increase a counter whenever a button is clicked.

let count = 0;

function handleClick() {
    count++;
    console.log("Button clicked:", count, "times");
}

handleClick();
handleClick();
handleClick();

Example 3: Click Event with Message

A click event can execute a function that displays a message.

function showMessage() {
    console.log("Welcome to CIIT Training Institute!");
}

showMessage();

Browser Example

In a real browser application, a click event can be attached to a button using addEventListener().

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

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