event.target / currentTarget Since: DOM Level 2（2000）

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
});

<div id="container">
	<button id="btn"><span>Click</span></button>
</div>
<p id="output"></p>

var container = document.querySelector("#container");
var output = document.querySelector("#output");

// Register a click event listener on container.
container.addEventListener("click", function(e) {
	// target is the HTML element that was actually clicked.
	console.log("target: " + e.target.tagName);

	// currentTarget is the HTML element where the listener is registered.
	console.log("currentTarget: " + e.currentTarget.tagName);

	// type is the kind of event that occurred.
	console.log("type: " + e.type);

	output.textContent = "target=" + e.target.tagName + ", currentTarget=" + e.currentTarget.tagName;
});

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.