DOM and Events

event.target is the deepest node the event was dispatched on and is identical for every listener in the path. event.currentTarget is the node whose listener is executing right now, so it differs from listener to listener.

addEventListener registers any number of independent listeners on one element and accepts an options argument — capture, once, passive, signal. element.onclick is a single property slot, so each assignment silently replaces the previous handler.

Both return the first matching element or null, but getElementById takes a raw id string and exists only on Document, while querySelector parses a CSS selector, so an id such as 3d-view needs CSS.escape or an attribute selector.

Node is the base type for everything in the DOM tree; Element is the subtype for tags. A parsed HTML document also contains Text nodes (including whitespace between tags), Comment nodes, the Document itself, and its DocumentType node.

preventDefault() cancels the browser's built-in reaction, such as following a link or submitting a form, while the event keeps travelling. stopPropagation() stops the event reaching other nodes but leaves the default action intact. defaultPrevented reports whether cancellation already happened.

An event first travels down from window to the target's parent firing capture listeners, then fires at the target, then travels back up firing bubble listeners. Ancestor capture handlers run outermost-first; ancestor bubble handlers run innermost-first.

removeEventListener matches on three things: the event type, the identical callback object, and the same capture flag. Two arrow functions with identical bodies are different objects, so nothing matches — and removeEventListener reports nothing when it removes nothing.

A DocumentFragment is a parentless, never-rendered container you fill offscreen, so the live document is touched once instead of 500 times. Inserting the fragment inserts its children, not the fragment itself, which leaves the fragment empty afterwards.

One node. Inserting a node that already has a parent detaches it from that parent first, so insertion moves rather than copies. The node keeps its identity, so listeners added with addEventListener, dataset values and expando properties all travel with it.

KeyboardEvent.key is the layout-aware value produced by the keystroke, such as "a", "A" or "Enter"; KeyboardEvent.code is the physical key position, such as "KeyA" or "Space", and never changes with layout. Match text shortcuts on key and positional controls on code.

Element.closest('.row') walks up from the element itself through its ancestors and returns the nearest element matching the selector, or null. Element.matches('.row') only tests that one element and returns a boolean.

getElementsByClassName returns a live HTMLCollection that keeps re-reflecting the document, while querySelectorAll returns a static NodeList captured once. Looping forward over the live collection while removing elements shifts the indexes and skips every other match.

append() accepts any number of nodes or strings, turns strings into text nodes, and returns undefined; appendChild() takes exactly one Node and returns it. prepend, before, after, replaceWith and remove share append()'s flexibility and act relative to the element itself, so no parent reference is needed.

They differ only in origin: screenX is measured from the screen, clientX from the viewport, pageX from the document (clientX plus scroll offset), and offsetX from the padding edge of the event target. For element-local coordinates, subtract getBoundingClientRect().left from clientX.

CustomEvent's bubbles option defaults to false, so the event is delivered only to listeners on the dispatch target itself. Construct it as new CustomEvent('item-selected', { bubbles: true }) for ancestors to receive it.

Dispatch is fully synchronous: dispatchEvent invokes every matching listener and only then returns, before the next statement runs. It returns false when the event was cancelable and a listener called preventDefault, and true otherwise.

once: true makes the browser remove the listener as it invokes the callback the first time. signal takes an AbortSignal; aborting its controller removes every listener registered with that signal, across any number of targets, without you holding a reference to each callback.

cloneNode(true) copies the node and its whole subtree; cloneNode(false) copies only the node itself with its attributes. Either way the copy is detached and carries no listeners added with addEventListener and no custom JavaScript properties.

The four positions are beforebegin (previous sibling), afterbegin (first child), beforeend (last child) and afterend (next sibling). Unlike appending to innerHTML, it parses only the new string and leaves the element's existing nodes untouched.

Browsers make touchstart, touchmove and wheel listeners passive by default when they are registered on window, document, document.documentElement or document.body, so preventDefault() is ignored. Opt back in with { passive: false }, or block the gesture declaratively with CSS touch-action.

Touchscreen browsers fire the touch sequence and then replay it as compatibility mouse events so older mouse-only pages keep working, so both handlers run. Pointer Events replace both families with one stream — pointerdown, pointermove, pointerup — tagged by pointerType.

The selector is matched against the whole tree, and only the results are filtered to descendants of the element you called it on, so '.card' may match an ancestor outside the widget. The :scope pseudo-class anchors the selector to that element.

They agree whenever the parent is an element. They differ when the parent is not one: for the <html> element, parentNode is the Document but parentElement is null, and inside a DocumentFragment parentNode is the fragment while parentElement is null. Climbing loops should use parentElement.

The composed flag is missing. It defaults to false, so a bubbling event stops at the shadow root. Adding composed: true lets it continue into the host's tree, where listeners see event.target retargeted to the host element.

The modal's call ends the dispatch before it reaches document, so the dismiss listener never runs. Fix it by listening on document in the capture phase, which runs before any descendant handler, or by removing the stopPropagation and coordinating some other way.

It promises the listener will never cancel the event's default action, so the browser can start scrolling immediately instead of waiting to see what the listener does. preventDefault() inside a passive listener is a no-op; Chrome logs a console warning when you try.

Anything the browser derives from the node being in a rendered document is discarded: focus, text selection, a scrollable element's offset, running CSS transitions and animations, and an iframe's loaded document, which reloads. Save that state before the move and restore it after.

Without capture, pointermove is dispatched by hit-testing, so it goes to whatever element is under the pointer once it leaves the thumb. setPointerCapture(pointerId) retargets every later event for that pointer to the capturing element until pointerup or pointercancel, which must also reset the drag state.

Node.contains() reports the tree as it is at call time. If the clicked node was removed from the DOM by an earlier re-render, it is now detached, so contains() returns false. Decide containment while the node is still connected, or check isConnected first.