Understanding Events in the Browser
What is an event?
Effectively an event is simply an object instantiated by the Event
interface. 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!