Understanding Events in the Browser
What is an event?
Effectively an event is simply an object instantiated by the Eventinterface. If you do not have a clear understanding of what interfaces are in the Browser then you can refer to my blog post about the Browser and Web APIs.
What does it mean? It means that you don’t need to think of events as these special entities that can be quite mysterious. As mentioned above, they are just objects:
clickEvent = new MouseEvent('click');If you take a look at Mozilla’s page on the Event interface you will see that it is the parent interface of a whole lot of other interfaces. For example, KeyboardEvent inherits from Event. This implies that a KeyboardEvent object will have the properties defined in Event and in KeyboardEvent, which explains why a keyboard event has properties such as key or which available when accessing them in your JavaScript code.
Events and Phases
Events can be fired upon a DOM node. The firing of an event happens as the result of either of the following:
- user interaction with the DOM
- some JavaScript code in a script
- browser (events generated internally, by the browser)
By using what we saw earlier we can understand what “firing an event” means: calling a web API to instantiate of an object with the interface defining the type of event that needs to be fired. For example, if the user clicks on the representation of a DOM node on the web page, then the MouseEvent Web API creates a MouseEvent object.
Once an event is fired it propagates by going through different phases which are:
- capturing phase
- targeting phase
- bubbling phases
These phases represent the way an event is traversing the DOM. The DOM is a tree of nodes, and in order to traverse the DOM an event has to navigate these nodes. This is why an Event object has a target property and a currentTarget property. The target property references the node that the event was fired upon, whereas, the currentTarget property references the node that the event is currently attached to. The way an event traverses the DOM is simple: it reassigns the currentTarget to a child or a sibling of the current node it is attached to. Here is a nice diagram I found online (I love diagrams in order to form a mental model):
Let’s assume that the above diagram represents a click event, then, a MouseEvent object was created and its target property was assigned to the td node, which is the parent node of the text node Over the River, Charlie. At the same time, the currentTarget property was assigned to window. What happened next is that the currentTarget property was reassigned to window.document, then currentTarget was, once again, reassigned with document.firstChild or otherwise currentTarget.firstChild. I think that from there it’s easy to understand that the way an event traverses the DOM is by reassigning the currentTarget property of the event with the nodes along the path to the target node. It is safe to assume that the path to traversing the DOM is determined beforehand by the browser with an efficient algorithm.
The point of this exercise is to show that when an event is fired and traverses the DOM to its target, it is just an object which is created with its currentTarget property reassigned to each node forming the path to the node that the target property is referencing.
Now, as it is mentioned on the above figure, the capturing phase stands for the event traversing the DOM from the document node down to the node referenced by target. The targeting phase happens when currentTarget and target are referencing the same node. Finally, the bubbling phase happens when the event traverses the DOM from the target up to the document node.
I hope this can shed some light on events in the browser. If you notice anything in my explanation that conflicts with your understanding then I would be happy to get some feedback!
Happy coding!
