DOM Events
Parameters
| Parameter | Description |
|---|---|
| type | String defines the name of the event to listen to. |
| listener | Function triggers when the event occurs. |
| options | Boolean to set capture, if Object you can set the following properties on it, notice that the object option is weakly supported. |
| 1. capture | A Boolean that indicates that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. |
| 2. once | A Boolean indicating that the listener should be invoked at most once after being added. If it is true, the listener would be removed automatically when it is invoked. |
| 3. passive | A Boolean indicating that the listener will never call preventDefault(). If it does, the user agent should ignore it and generate a console warning. |
Remarks
Events dont start at the thing you trigger the event on (a button for example).
Instead
It touches every element in its path and it inform every element that an event is happening. Events also go back up after they reach their destination, informing the elements again of its occurrence.
As we learned, events start from the top of DOM tree, informs every node in its path down to its destination, then goes back up when it reaches its destination, also informing every element it touches on its way up about its occurrence.
Events going down the DOM tree are in the capturing phase, events going up the DOM tree are in the bubbling phase.
By default events are listened to in the bubbling phase. To change this you can specify which phase the event gets listened to by specifying the third parameter in the addEventListener function. (code example in the capture section)
