What is the click event's type and how to reference the button?

WHAT THIS TESTS: This question tests two separate but related concepts in the DOM event model. The first is type specificity within the event inheritance chain. The second is the distinction between event.target and event.currentTarget, which separates the element that dispatched the event from the element that registered the listener. Senior interviewers care about this because confusing the two leads to delegation bugs and brittle event handling.

A GOOD ANSWER COVERS: A strong answer states that the handler receives a MouseEvent, not merely Event or UIEvent. It notes the inheritance chain: MouseEvent extends UIEvent, which extends Event. For the button reference, the answer should name event.currentTarget as the reliable property, explaining that it refers to the element on which the listener was registered. It should contrast this with event.target, which identifies the deepest element actually clicked and can differ when the button contains nested children like icons or spans. It may also mention that in TypeScript, the handler should be typed as (event: MouseEvent) => void or use a proper generic with addEventListener to avoid implicit any. Mentioning event.currentTarget may require a type assertion in TypeScript since it is typed as EventTarget | null, so casting to HTMLButtonElement is common practice.

COMMON WRONG ANSWERS: Answering Event or UIEvent instead of MouseEvent shows shallow knowledge of the event hierarchy. Recommending event.target as the way to get the button is a frequent mistake that breaks when the button contains child elements. Suggesting this is also risky because this depends on how the function is invoked and can be undefined in arrow functions or strict mode. Another red flag is claiming currentTarget and target are always identical, which ignores event bubbling and nested DOM structures.

LIKELY FOLLOW-UPS: The interviewer may ask how event delegation changes the answer, where the listener is on a parent but you need the specific button that was clicked. They might ask about TypeScript typing challenges with event.currentTarget and why it is not automatically narrowed to HTMLButtonElement. They could also ask about the MouseEvent properties available, such as clientX, clientY, or button, and when you would use PointerEvent instead.

ONE CONCRETE EXAMPLE: Imagine a button containing an SVG icon. A user clicks directly on the icon. The event.target is the SVG path element, while event.currentTarget is the button element. If your handler relies on event.target to toggle a class on the button, it will incorrectly toggle the SVG instead. Using event.currentTarget ensures you always manipulate the button regardless of where the click lands inside it.

Source: developer.mozilla.org