DOM Events


typeString defines the name of the event to listen to.
listenerFunction triggers when the event occurs.
optionsBoolean to set capture, if Object you can set the following properties on it, notice that the object option is weakly supported.
1. captureA 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. onceA 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. passiveA Boolean indicating that the listener will never call preventDefault(). If it does, the user agent should ignore it and generate a console warning.


Origin of events

Events dont start at the thing you trigger the event on.

Events dont start at the thing you trigger the event on (a button for example).


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.

Capturing & Bubbling

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)