JavaScript Element click Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word CLICK

Definition

In JavaScript, an element receives a click when the primary pointer button is pressed and released inside it, when a touch gesture activates it, or when an equivalent action occurs (for example Space / Enter on buttons and links) (MDN). It fires after mousedown and mouseup, in that order.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for click. Start with this line.

JavaScript
el.addEventListener("click", fn)
CallWhat it does
el.addEventListener("click", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("click", …) — no import required.

Library declarations
JavaScript
el.addEventListener("click", fn)

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Consecutive Click Count (MDN)

Show event.detail as the user clicks rapidly.

JavaScript
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `Click count: ${event.detail}`;
});
Try It Yourself

How It Works

  1. Listen for click. Fires after press + release (MDN).
  2. Read event.detail. Consecutive click count on the target.
  3. Update the label. Shows 1, then 2 on a fast second click.
  4. Pause resets the streak. Interval length varies by browser / settings.

Example 2 — Simple Click Handler

Run an action when the button is activated.

JavaScript
const btn = document.getElementById("go");
const out = document.getElementById("out");

btn.addEventListener("click", () => {
  out.textContent = "Button activated";
});
Try It Yourself

How It Works

  1. Use a real <button>. Gets mouse, touch, and keyboard activation.
  2. Register with addEventListener. Prefer this over inline HTML handlers.
  3. Run the action. Keep the handler focused on one job.
  4. Works with AT. click is device-independent (MDN).

Example 3 — onclick Property

Same idea using the handler property (one listener slot).

JavaScript
const btn = document.getElementById("go");
const out = document.getElementById("out");

btn.onclick = () => {
  out.textContent = "onclick fired";
};
Try It Yourself

How It Works

  1. Assign onclick. Stores a single handler function.
  2. A new assignment replaces any previous onclick.
  3. Prefer addEventListener when you need multiple listeners.
  4. Same click event under the hood as Example 2.
Compatibility

Browser Support

Element.click is marked Baseline Widely available on MDN (since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Element click

Primary activation from mouse, touch, keyboard, and assistive tech — after mousedown and mouseup.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer Supported (legacy MouseEvent)
Supported
click Baseline support

Bottom line: Safe everywhere modern. Prefer real buttons/links for keyboard clicks, and use auxclick for non-primary buttons. See the MDN Element click reference.

Frequently Asked Questions

An element receives click when a pointing-device primary button is pressed and released inside it, when a touch gesture activates it, or when an equivalent action occurs (such as Space or Enter on elements that have a default key handler) (MDN).
No. MDN marks Element click as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. Some parts of the feature may have varying support levels.
A PointerEvent (inherits from MouseEvent). Older specifications used MouseEvent; check compatibility if you rely on PointerEvent-only fields.
click fires after both mousedown and mouseup have fired, in that order (MDN).
For click, detail is the number of consecutive clicks on the target (2 for double-click, 3 for triple-click, and so on). The counter resets after a short idle interval that can vary by browser and user settings (MDN).
Space and Enter click activation applies to elements with a default key event handler (for example buttons and links). Merely adding tabindex does not automatically give every element that keyboard click behavior (MDN).

Next: Element compositionend

Learn the event that fires when a text composition sequence finishes.

compositionend tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element blur Event JavaScript Element compositionend Event