JavaScript Event type Property

What You’ll Learn

The type property is a read-only string naming the event—like click, load, or error. It is set when the event is constructed. Learn MDN’s keyboard/mouse logger, shared handlers, and custom event names—with five examples and try-it labs.

Introduction

When you write element.addEventListener("click", handler), the string "click" is the event type. Inside the handler, event.type is that same name for the event that actually fired.

That is useful when one function handles several kinds of input—for example logging every keyboard and mouse stage, or branching on click vs keydown in shared UI code.

Understanding Event.type

An instance property that returns a string containing the event’s type—the name commonly used to refer to that event.

• Examples — click, load, error, keydown, submit.
• Set at construction — for both built-in and new Event("name") events.
• Read-only — you do not assign event.type = … later.
• Matches listen name — same string you pass to addEventListener.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.type

Value

A string containing the type of the Event.

Typical pattern

button.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

⚖️ type vs Related Ideas

Examples Gallery

Examples follow MDN Event: type. Use View Output or Try It Yourself.

button.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

click

function getEventType(event) {
  const log = document.getElementById("log");
  log.innerText = `${event.type}\n${log.innerText}`;
}

document.addEventListener("keydown", getEventType);
document.addEventListener("keypress", getEventType);
document.addEventListener("keyup", getEventType);

document.addEventListener("mousedown", getEventType);
document.addEventListener("mouseup", getEventType);
document.addEventListener("click", getEventType);

click
mouseup
mousedown

function onInput(event) {
  switch (event.type) {
    case "click":
      out.textContent = "Mouse click";
      break;
    case "keydown":
      out.textContent = "Key: " + event.key;
      break;
    default:
      out.textContent = "Other: " + event.type;
  }
}

button.addEventListener("click", onInput);
window.addEventListener("keydown", onInput);

Mouse click

const target = new EventTarget();

target.addEventListener("save", (event) => {
  console.log(event.type); // "save"
});

target.dispatchEvent(new Event("save"));

save

function logType(event) {
  out.textContent = event.type + " → " + event.target.value;
}

field.addEventListener("input", logType);
field.addEventListener("change", logType);

input → hello

🚀 Common Use Cases

• Logging which event fired during debugging.
• One handler for several related event names.
• Custom application events (save, cart:update).
• Teaching the link between addEventListener and the event object.
• Analytics that tag interactions by type string.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Read-only string set when the event is constructed.
• Case-sensitive; stick to standard lowercase DOM names.
• Related learning: timeStamp, target, Event(), addEventListener(), JavaScript hub.

💡 Best Practices