JavaScript Event srcElement Property

What You’ll Learn

The srcElement property is a deprecated alias for Event.target—the element (or other EventTarget) the event is aimed at. Learn why old code used it, how it differs from currentTarget, and how to migrate—with five examples and try-it labs.

Introduction

Today every beginner tutorial says: read event.target to learn which element was clicked. Decades ago, Internet Explorer used a different name: event.srcElement.

Modern browsers still expose srcElement as a compatibility alias so old scripts keep working. MDN is clear: treat it as deprecated and write event.target in all new code.

Understanding Event.srcElement

An instance property that is simply another name for Event.target.

• Alias — same target object as event.target.
• Deprecated — keep for legacy reading; do not teach as the primary API.
• Origin — historically associated with older IE event models.
• Not currentTarget — that is the listener host during bubbling.
• Web Workers — MDN notes it is available in workers.

📝 Syntax

event.srcElement // deprecated alias
event.target     // use this instead

Value

The same EventTarget as event.target (or null in the same situations target would be).

Migration one-liner

// Before (legacy):
// const el = event.srcElement;

// After (modern):
const el = event.target;

⚖️ srcElement vs Related Ideas

Examples Gallery

Examples follow MDN Event: srcElement. Compare the alias with target, then migrate.

button.addEventListener("click", (event) => {
  // Deprecated — for learning / legacy only:
  console.log(event.srcElement && event.srcElement.nodeName);
});

BUTTON

box.addEventListener("click", (event) => {
  console.log(event.srcElement === event.target); // usually true
  console.log("target:", event.target.nodeName);
});

true
target: DIV

parent.addEventListener("click", (event) => {
  console.log("srcElement/target:", event.target.id);
  console.log("currentTarget:", event.currentTarget.id);
});

srcElement/target: child
currentTarget: parent

// Legacy pattern (avoid writing new code like this):
function getTarget(event) {
  return event.target || event.srcElement;
}

// Modern:
function getTargetModern(event) {
  return event.target;
}

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

BUTTON

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (!item || !list.contains(item)) return;
  out.textContent = "Clicked: " + item.textContent;
});

Clicked: Item B

🚀 Common Use Cases

• Reading / migrating old IE-era event helpers.
• Understanding why some tutorials still mention srcElement.
• Teaching target vs currentTarget with a deprecated alias aside.
• Code search cleanup: replace srcElement with target.
• Interviews: know the alias, recommend the standard property.

🔧 How It Works

📝 Notes

• MDN: Deprecated — show the banner; use Event.target instead.
• Available in Web Workers.
• Not a different concept from target—just another name.
• Related learning: returnValue, currentTarget, cancelBubble, addEventListener(), JavaScript hub.

💡 Best Practices