JavaScript Event isTrusted Property

What You’ll Learn

The isTrusted property is a read-only boolean on every Event: true when the user agent generated the event, and false when your script sent it with dispatchEvent(). Learn the HTMLElement.click() exception, MDN’s simple check, and practical patterns—with five examples and try-it labs.

Introduction

Your click handler cannot tell “who” clicked just by looking at event.type. Real mouse/keyboard input and events you create in JavaScript can look the same—unless you read event.isTrusted.

When the browser (user agent) creates the event for a real interaction—or for some of its own programmatic methods such as HTMLElement.focus()—MDN documents isTrusted as true. When you call target.dispatchEvent(new Event(…)), it is false. Calling element.click() also produces a click with isTrusted === false.

Understanding Event.isTrusted

An instance property that answers: “Did the user agent generate this event, or did script dispatch it?”

• true — generated by the user agent (user actions and some UA methods such as focus()).
• false — dispatched via EventTarget.dispatchEvent(), or a click from HTMLElement.click().
• Read-only — cannot be forged by assignment.
• Baseline Widely available on MDN (since September 2016); also in Web Workers.

📝 Syntax

event.isTrusted

Value

A boolean value.

MDN check

if (e.isTrusted) {
  /* The event is trusted */
} else {
  /* The event is not trusted */
}

⚖️ isTrusted vs Related Ideas

Examples Gallery

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

button.addEventListener("click", (e) => {
  if (e.isTrusted) {
    out.textContent = "The event is trusted";
  } else {
    out.textContent = "The event is not trusted";
  }
});

The event is trusted

button.addEventListener("click", (event) => {
  console.log("isTrusted =", event.isTrusted); // true for a real click
});

isTrusted = true

button.addEventListener("click", (event) => {
  out.textContent = "isTrusted = " + event.isTrusted;
});

button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
// logs: isTrusted = false

isTrusted = false

button.addEventListener("click", (event) => {
  out.textContent = "isTrusted = " + event.isTrusted;
});

button.click(); // programmatic — isTrusted false

isTrusted = false

button.addEventListener("click", (event) => {
  if (!event.isTrusted) {
    out.textContent = "Ignored untrusted click";
    return;
  }
  out.textContent = "Handled trusted click";
});

// Scripted paths are ignored:
button.click();
button.dispatchEvent(new Event("click", { bubbles: true }));

Ignored untrusted click

🚀 Common Use Cases

• Separating analytics for real user clicks vs test harness events.
• Avoiding double work when both UI code and .click() fire handlers.
• Debugging: confirm whether a handler saw a synthetic event.
• Teaching dispatchEvent vs genuine user input.
• Guarding sensitive UI actions that should require a real gesture (with other checks too).

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2016) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Read-only—scripts cannot assign a forged trusted state.
• HTMLElement.click() → click with isTrusted === false.
• Related learning: explicitOriginalTarget, dispatchEvent(), Event(), MouseEvent(), JavaScript hub.

💡 Best Practices