JavaScript Event type Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word TYPE

Definition

In JavaScript, the type read-only property of the Event interface returns a string naming the event — such as click, load, or error (MDN). It is set when the event is constructed.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.type. Start with this line.

JavaScript
event.type
CallWhat it does
event.typePrimary signature.

Built into the browser. Read event.type on an Event instance — no import required.

Library declarations
JavaScript
event.type

Parameters

ParameterDescription
Listen stringRequired. Must match the type you care about
Branch / logOptional. Shared handlers and debugging

Return Value

Return ValueDescription
*The current value of event.type.

JavaScript Examples

Example 1 — Read event.type

Click a button and log the type name.

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

btn.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});
Try It Yourself

How It Works

  1. Register a listener. The first argument "click" is the type name.
  2. User clicks. The browser creates a click event and calls your handler.
  3. Read event.type. It returns the string "click".
  4. Match listen name. The value matches what you passed to addEventListener.

Example 2 — Shared Handler for Click & Key

One function for two types — branch on event.type.

JavaScript
function onInput(event) {
  switch (event.type) {
    case "click":
      console.log("Mouse click");
      break;
    case "keydown":
      console.log("Key: " + event.key);
      break;
    default:
      console.log("Other: " + event.type);
  }
}

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

How It Works

  1. One function, two listeners. Both call onInput.
  2. Switch on type. "click" and "keydown" take different paths.
  3. Key details stay available. On keydown you can still use event.key.
  4. Less duplication. Shared setup stays in one place.

Example 3 — Custom Event Type

Construct and dispatch an event named save.

JavaScript
const target = new EventTarget();

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

target.dispatchEvent(new Event("save"));
Try It Yourself

How It Works

  1. Pick a name. The first argument to new Event(...) becomes type.
  2. Listen for the same name. addEventListener("save", …).
  3. Dispatch. The handler runs and reads event.type === "save".
  4. Names must match. Listening for "Save" would miss "save".
Compatibility

Browser Support

Event.type is Baseline Widely available (MDN: since July 2015). Safe for modern evergreen browsers and legacy IE. Also available in Web Workers.

✓ Baseline · Widely available

Event.type

Read-only string — the event’s name (click, load, error, custom names, and more).

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
Event.type Excellent

Bottom line: Use event.type to know which kind of event fired—especially in shared handlers and custom events. See the MDN Event.type reference.

Frequently Asked Questions

It is a read-only string on an Event that names the event—such as click, load, or error. It is set when the event is constructed (MDN).
No. MDN marks Event.type as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
The first argument to addEventListener (for example "click") is the type string you listen for. Inside the handler, event.type is that same name for the event that fired.
Yes. Attach the same function to several listeners (keydown, click, …) and branch with if (event.type === "click") or a switch.
new Event("save") or new CustomEvent("save") sets type to "save". You listen with addEventListener("save", …).
Yes. Use the exact lowercase names the DOM uses (click, not Click). Custom names should stay consistent too.

Next: composedPath()

See the full EventTarget array the event travels through.

composedPath() 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)

9 people found this page helpful

JavaScript Event timeStamp Property JavaScript Event composedPath() Method