Note

DOM API’s return deep copy

DOM API

Browser Events

When a user or a browser performs an action, it is known as a "browser event.”

<aside> ⚠️ An event starts from the document's root element.

</aside>

There are three different phases during the life cycle of events.

• Capturing phase (First listener): In the capturing phase, the event goes from the outermost element to the targeted element.
• Target phase: In this phase, the event reaches the target and gets triggered. It triggers two times, first at the capturing phase and second at the bubbling phase.
• Bubbling phase (Second listener): In this phase, the event goes up from the innermost element, calling the handlers on its way. It occurs after the capturing phase.

<aside> ⚠️ For the most part, all events bubble, but some exceptions are always there.

</aside>

There is a event phase property with the event that indicates which phase of the event is currently being evaluated by returning a number.

• None = 0
• Capturing = 1
• Target = 2
• Bubbling = 3

useCapture - The unknown parameter

When the browser event system was first designed, there were two conflicting ways of modelling how it worked. They were called event capture and event bubbling.

One model was event capture (advocated by the Netscape developers) which says the event goes from the outermost element to the targeted element (This notified the html  element first and worked its way down the tree till target element).

The other model was event bubbling (advocated by the Microsoft developers) which says the event goes up from the innermost element, calling the handlers on its way (This notified the target element first, and worked its way up the tree till root element).

The eventual compromise was that it should do both first the capture phase then the bubble phase and let the developer descide which way they want the event to trigger. So the event works its way down the tree and then back up again. This is a long-winded way of getting to addEventListener.

addEventListener listens for both capture phase and bubbling phase events. The third parameter (called useCapture in the specification) allows the programmer to specify which phase they want to use. There are two values of capture options - if it is true then it is in the capturing phase and if it is false then it is in the bubbling phase. By default the value of capture is false, that is, it is in the bubbling phase. In modern browsers, this defaults to false.

DispatchEvent