JavaScript Event timeStamp Property

What You’ll Learn

The timeStamp property is a read-only number: milliseconds from the page (or worker) time origin until the event was created. Learn MDN’s keypress demo, event deltas, reduced precision, and how it differs from Date.now()—with five examples and try-it labs.

Introduction

Every event carries a creation time. event.timeStamp tells you how many milliseconds had passed since the document (or worker) started when that event was created.

That makes it great for measuring gaps between clicks, keys, or pointer moves—without depending on the user’s wall clock. Browsers may round the value slightly to reduce fingerprinting.

Understanding Event.timeStamp

An instance property that returns when the event was created, as a high-resolution timestamp in milliseconds.

• Unit — milliseconds since the time origin.
• Window origin — roughly when navigation / document loading began.
• Worker origin — when the worker was created.
• DOMHighResTimeStamp — high-res number; precision may be reduced for privacy.
• Read-only — set by the browser when the event is created.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.timeStamp

Value

A number: milliseconds from the time origin until the event was created (a DOMHighResTimeStamp).

MDN-style read

document.body.addEventListener("keypress", (event) => {
  console.log(event.timeStamp);
});

⚖️ timeStamp vs Related Ideas

Examples Gallery

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

function getTime(event) {
  const time = document.getElementById("time");
  time.textContent = event.timeStamp;
}

document.body.addEventListener("keypress", getTime);

timeStamp: 18432.5

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

timeStamp = 12045.2

let last = null;

button.addEventListener("click", (event) => {
  if (last !== null) {
    const delta = event.timeStamp - last;
    out.textContent = "Delta: " + delta.toFixed(1) + " ms";
  } else {
    out.textContent = "First click at " + event.timeStamp.toFixed(1);
  }
  last = event.timeStamp;
});

Delta: 412.0 ms

button.addEventListener("click", (event) => {
  console.log("event.timeStamp:", event.timeStamp);
  console.log("Date.now():", Date.now());
  // timeStamp ≈ time since page origin
  // Date.now ≈ Unix epoch wall clock
});

event.timeStamp: 8521.4
Date.now(): 1753700000123

let lastAccepted = 0;

button.addEventListener("click", (event) => {
  if (event.timeStamp - lastAccepted < 500) {
    out.textContent = "Ignored (too soon)";
    return;
  }
  lastAccepted = event.timeStamp;
  out.textContent = "Accepted at " + event.timeStamp.toFixed(0);
});

Ignored (too soon)

🛡️ Reduced Time Precision

MDN notes that browsers may round event.timeStamp to help protect against timing attacks and fingerprinting. In Firefox, reduced precision often defaults to about 2 ms; with stronger fingerprinting resistance it can be much coarser (for example 100 ms).

// With reduced precision, values may look "stepped":
// 9934, 10362, 11670, …
// or even multiples of 100 with stronger privacy settings.

For most UI timing (debounce-like gaps of hundreds of milliseconds), reduced precision is fine. Do not rely on microsecond-level differences in web apps.

🚀 Common Use Cases

• Measuring time between user actions (double-click, combo keys).
• Simple input throttling without setTimeout.
• Logging relative event order / latency in demos.
• Comparing synthetic vs real event timing in tests.
• Teaching time origin vs wall-clock Date.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Read-only DOMHighResTimeStamp in milliseconds.
• Precision may be reduced (fingerprint / timing-attack protection).
• Related learning: target, isTrusted, Event(), addEventListener(), JavaScript hub.

💡 Best Practices