Event Listener Registration

Event listeners let browser code react to events such as clicks, keyboard input, and pointer activity. They are registered with an event target, an event type, a callback function, and optionally listener options.

Use `addEventListener()` to attach a callback to an `EventTarget`, such as an element, `document`, or `window`. The first argument identifies the event type, such as `click`, and the second supplies the function that should run when that event occurs.

The callback receives an `Event` object containing information about the event. For example, a click handler can inspect `event.target` to determine which element initiated the event. The callback can be a named function, an inline function, or another callable function value.

The optional third argument can configure registration behavior. Common options include `once`, which removes the listener after its first invocation, and `capture`, which controls whether the listener participates in the capture phase. `passive` can indicate that the listener will not call `preventDefault()`.

`addEventListener()` is generally preferable to assigning properties such as `element.onclick` when multiple independent handlers may need to observe the same event. Each separately registered listener can coexist, while assigning `onclick` replaces the previous property value.

To remove a listener later, call `removeEventListener()` with the same target, event type, and function reference used for registration, along with the relevant capture setting. Creating a new anonymous function with identical code does not provide the same function reference.

Key points

• `addEventListener(type, callback, options)` registers an event handler.
• The callback receives an `Event` object when the event occurs.
• Options can control behavior such as `capture`, `once`, and `passive`.
• Multiple listeners can be registered for the same event target and type.
• Removing a listener requires the original callback function reference.

Interview questions

What are common options passed to `addEventListener()`?

The options object can specify behaviors such as `once`, `capture`, and `passive`. `once` causes the listener to be removed after it runs once. `capture` controls participation in the capture phase, while `passive` indicates that the listener will not call `preventDefault()`.

How do you register a click handler in JavaScript?

Call `addEventListener()` on the target element with `click` as the event type and a callback as the handler. The callback runs whenever the element receives the relevant click event. The callback receives the event object, which can be inspected for details about the interaction.

What is the difference between `addEventListener()` and assigning `onclick`?

`onclick` is a property, so assigning a new function replaces the function currently stored there. `addEventListener()` creates an event listener registration and permits multiple listeners for the same event type. This makes `addEventListener()` useful when different parts of an application need independent handlers.

How do you correctly remove an event listener?

Keep a reference to the function used during registration and pass that same reference to `removeEventListener()`. The event type must also match, and the capture setting must correspond to the original registration. Recreating an equivalent anonymous function does not identify the existing listener.