document.addEventListener

addEventListener is used to add event handler to DOM element. There are three phases in the process of an event on browser: capture phase, target phase and bubbling phase.

When user click on the web page, the event propagates from window to the target’s parent first, which is the capture phase. Then the event arrives at the target element, which is the at-target phase. Finally, the event propagates through its ancestors till the window. This phase is the bubbling phase.
If set useCapture option, then the event will be captured on the capture phase, the event handler binding on the ancestor of the event target will be fired before propagated to the target element.
You can use stopPropagation to stop the event from propagating to the descendants of the element which calls stopPropagation at capture phase, or propagating to the ancestors of the element which calls the function.