JavaScript Element DOMActivate Event

What You’ll Learn

The DOMActivate event once signaled that an element became active (mouse click or keyboard activation). Learn why it is deprecated, that there is no onDOMActivate property, event.detail quirks, how to prefer click, and five try-it labs.

Introduction

Older DOM specs imagined a generic “activate” signal for when a control was used. DOMActivate was that idea: fire when the user clicks or keyboard-activates an element.

Today, the portable activation event is click. It covers primary mouse button press+release, many touch activations, and keyboard activation on buttons and links. Use DOMActivate only when reading or migrating legacy code.

Understanding DOMActivate

An instance event that answered: “Did this element just become active?”

• Deprecated on MDN — avoid in new projects.
• UIEvent — may expose detail (browser-specific meaning).
• Listen with addEventListener("DOMActivate", ...) only.
• No onDOMActivate handler property.
• Replacement — click (and related pointer / keyboard patterns).

📝 Syntax

Use the event name with addEventListener only:

addEventListener("DOMActivate", (event) => { });

// There is no onDOMActivate property.

Event type

A UIEvent (inherits from Event).

Notable property

⚖️ DOMActivate vs click

Examples Gallery

Examples follow MDN Element: DOMActivate event. Demos also attach click so labs still teach something useful when DOMActivate never fires.

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

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

Click count: 0
(or a click-like counter, depending on the browser)

const button = document.getElementById("btn");
const out = document.getElementById("out");

function activated(via) {
  out.textContent = "Activated via " + via;
}

button.addEventListener("DOMActivate", () => activated("DOMActivate"));
button.addEventListener("click", () => activated("click"));

Activated via click

const btn = document.getElementById("btn");
const status = document.getElementById("status");
let seen = false;

btn.addEventListener("DOMActivate", () => {
  seen = true;
  status.textContent = "DOMActivate fired in this browser.";
});

btn.addEventListener("click", () => {
  if (!seen) {
    status.textContent = "click fired; DOMActivate not seen yet (likely unsupported).";
  }
});

click fired; DOMActivate not seen yet (likely unsupported).

const btn = document.getElementById("btn");
const log = document.getElementById("log");

btn.addEventListener("DOMActivate", (event) => {
  log.textContent += "DOMActivate detail=" + event.detail + "\n";
});

btn.addEventListener("click", (event) => {
  log.textContent += "click detail=" + event.detail + "\n";
});

click detail=1

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

button.addEventListener("click", () => {
  button.textContent = "Activated with click";
});

Activated with click

🚀 Common Use Cases (Legacy Only)

• Reading old documentation that mentions activation events.
• Migrating legacy widgets that listened for DOMActivate.
• Interview questions comparing deprecated vs modern DOM events.
• Feature-detect demos that show what your browser still supports.
• Teaching why click became the portable activation API.

🔧 How It Works (When Supported)

📝 Notes

• MDN: Deprecated — status banner required before What You’ll Learn.
• Not Experimental or Non-standard on the MDN Element page for this event.
• No onDOMActivate property—use addEventListener only.
• event.detail behavior is browser-specific.
• Related learning: click, dblclick, DOMMouseScroll, addEventListener(), JavaScript hub.

💡 Best Practices