Capturing events in javascript that are not bubbling up

January 15th, 2016 - Bonn

I wanted to listen to an event that whose propagation was being stopped before reaching my parent element. To do that I can pass a third parameter useCapture to the addEventListener

eventTarget.addEventListener(type, listener, useCapture=false)

It seems that this third parameter exists for historical reasons, since Netscape wanted a model in which events went down the tree (from parent elements to the target, this is event capturing), and Microsoft wanted it to go up the tree (from target to parents, this is the usual event bubbling). In modern browsers, this parameter defaults to false, and Microsoft didn’t support it (= not supporting capturing) until IE9.

Example:

See the Pen Example of event capturing by Fernando Sainz (@fsainz) on CodePen.

Links: