Event Delegation Common Pitfalls

Not checking e.target (handling irrelevant clicks), using the wrong parent (too high or too low), using non-bubbling events (focus/blur do not bubble), and stopPropagation breaking delegation.

Because the parent listener receives all clicks within the parent, including clicks on non-relevant areas. Check e.target.matches() or e.target.closest() to ensure the click was on a relevant child before handling.

focus and blur do not bubble, so traditional delegation does not work. Use focusin and focusout, which are the bubbling versions of focus and blur. They work with event delegation.

If a child calls stopPropagation, the event does not bubble to the parent, so the parent's delegation listener never fires. Avoid stopPropagation when using delegation, or use it very carefully.

The closest parent that contains all the children you want to handle. Too high (document) means unnecessary checks on every click. Too low may not contain all children. The ideal is the direct parent (ul for li, table for tr).