The onclick Event in JavaScript

The click event is the most common event in web development. Let's explore it in depth.

addEventListener (Recommended)

let btn = document.querySelector("#myBtn");

btn.addEventListener("click", function() {
    alert("Button clicked!");
});

// Multiple listeners on the same element
btn.addEventListener("click", function() {
    console.log("Also logged!");
});

onclick Property

let btn = document.querySelector("#myBtn");

btn.onclick = function() {
    alert("Clicked!");
};

// Warning: this REPLACES the previous handler
btn.onclick = function() {
    alert("Only this one runs now!");
};

Practical Examples

// Toggle visibility
let toggleBtn = document.querySelector("#toggle");
let content = document.querySelector(".content");

toggleBtn.addEventListener("click", function() {
    if (content.style.display === "none") {
        content.style.display = "block";
        toggleBtn.textContent = "Hide";
    } else {
        content.style.display = "none";
        toggleBtn.textContent = "Show";
    }
});

// Counter
let count = 0;
let display = document.querySelector("#count");
let incrementBtn = document.querySelector("#increment");
let decrementBtn = document.querySelector("#decrement");

incrementBtn.addEventListener("click", function() {
    count++;
    display.textContent = count;
});

decrementBtn.addEventListener("click", function() {
    count--;
    display.textContent = count;
});

Event Delegation

// Instead of adding click events to every list item...
let list = document.querySelector("ul");

list.addEventListener("click", function(e) {
    if (e.target.tagName === "LI") {
        e.target.classList.toggle("completed");
    }
});

Event delegation is more efficient — one listener on the parent instead of many on children.