event.target / currentTarget

element.addEventListener("eventName", function(e) {
	e.target;        // The HTML element on which the event actually occurred
	e.currentTarget; // The HTML element to which the event listener is attached
	e.type;          // The type of the event
});

sample_eventTarget.html

<div id="container">
	<button id="btn"><span>Click</span></button>
</div>
<p id="output"></p>
<ul id="fighter-list">
	<li data-fighter="iori"><span>Yagami Iori</span></li>
	<li data-fighter="kyo"><span>Kusanagi Kyo</span></li>
	<li data-fighter="terry"><span>Terry Bogard</span></li>
</ul>
<form id="login-form">
	<input type="text" name="username" placeholder="Username">
	<button type="submit">Login</button>
</form>

sample_eventTarget.js

// Pattern 1: Basics of e.target / e.currentTarget / e.type
var container = document.getElementById("container");
var output = document.getElementById("output");
container.addEventListener("click", function(e) {
	console.log("target: " + e.target.tagName);          // The element actually clicked
	console.log("currentTarget: " + e.currentTarget.tagName); // The element with the listener
	console.log("type: " + e.type);                      // Outputs "click"
	output.textContent = "target=" + e.target.tagName + ", currentTarget=" + e.currentTarget.tagName;
});
// Clicking the span: target=SPAN, currentTarget=DIV

// Pattern 2: Event delegation using e.target (works for dynamically added elements too)
var fighterList = document.getElementById("fighter-list");
fighterList.addEventListener("click", function(e) {
	// Even if the span inside the li is clicked, closest() finds the li.
	var li = e.target.closest("li");
	if (!li) { return; }
	console.log("Selected: " + li.getAttribute("data-fighter"));
	// Outputs "iori", "kyo", or "terry".
});

// Pattern 3: Retrieve form data from e.target on submit
var form = document.getElementById("login-form");
form.addEventListener("submit", function(e) {
	e.preventDefault(); // Prevent page navigation.
	var username = e.target.querySelector("[name='username']").value;
	console.log("Login attempt: " + username);
	console.log("Form id: " + e.currentTarget.id); // Outputs "login-form"
});

View sample page

When you click the <span> inside the button, target is the <span> that was actually clicked, while currentTarget is the <div> where the listener is registered.

// When <span> is clicked
target: SPAN            // The HTML element that was actually clicked
currentTarget: DIV      // The HTML element where the listener is registered
type: click             // The type of event

<p id="output">target=SPAN, currentTarget=DIV</p>

The difference between event.target and event.currentTarget becomes clear when you understand event bubbling — the propagation of an event from a child element up to its parent elements. When a child element is clicked, the event travels from the child up to its parents. At that point, event.target refers to the child element that was actually clicked, while event.currentTarget refers to the parent element where the listener is registered.

In the event delegation pattern, you register a listener on a parent element and use event.target to identify which child element was clicked and branch your logic accordingly. This technique becomes even more powerful when combined with element.closest(), since it also works with dynamically added HTML elements.

event.type is useful when you want a single function to handle multiple events. For example, you can handle both mouseover and mouseout in the same function and branch your logic based on the value of event.type.