🔰capturing phase

handlers registered on container elements have the oppertunity to intercept events before they are delivered to their actual target.

// capturing handler, same as {capture: true}
container.addEventListener("click", capturingHandler, true);

// ⭐️ prevent touch screen default actions.
container.addEventListener("touchmove", 
    event => { event.preventDefault() },     
    {passive: false}        // ⭐️ important
);

The optional third argument to addEventListener() is a boolean value or object. If you pass true, then the handler is registered as a capturing event handler.

If you want to remove a capturing event handler, you must also pass true as the third argument to removeEventListener().

⚠️ event.target's capturing handlers are NOT invoked❗️

capturing handlers can be used:

  • for debugging

  • to filter events so that the target event handlers are never actually invoked.

  • for handling mouse drags.

Previousbubbling phaseNextstop propagation

Last updated