Chapter 15 | The
In this chapter we are stepping out of the
head and into the
body of the document by looking at the
body element. The
body element represents the main content, the visual and interactive elements of our document, and has the implicit ARIA(Accessible Rich Internet Applications) role of
document assigned. Almost everything we will look at from here on out will have a visual representation in the browser and will be the elements we use to construct the user interfaces our users will interact with.
body element itself can contain all of the global attributes available to most HTML elements but, it also has a number of event handler attributes that are unique in how they are processed during event bubbling and capture. While it is best practice to register event handlers on elements via
Note: Digging into the details of the various event handlers is beyond the scope here, but the MDN Web Docs article listed in related reading is a great starting point to dig deeper into events and event handling on the web.
A list of these unique event handlers available on the
body element can be found here and here(Note the items with an *). What makes these unique and therefore worthwhile discussing here is how they fit into the event processing model. This is best demonstrated with an example.
First, let’s look at an example of a non-Window-reflected event handler that can be used on the
body element. In this case, the
onclick event handler.
Live Sandbox - non-Window-reflected
The bubbling of an event, in this case, starts from the element on which the event was triggered and then bubbles up through the DOM(Document Object Model) until:
- It is captured by an event handler and the event bubbling is canceled or,
- It reaches the global
In our case here, we would see the following output in the console:
As you can see here, the bubbling is as expected. Now, let’s look at a Window-reflected event handler on the
Live Sandbox - Window-reflected
Here is the output you will see in the console after having clicked the link:
At first glance you might think hmmm 🤔 that looks fine but, let’s take a closer look 🕵️♀️ We actually have three registered event handlers that are never being called:
But wait! What?! There is an output in the console that states
fired called by error:: body element. And here lies the difference. The
Error that was thrown when clicking on the link does not bubble up from the element as we saw with the previous click event but, this event is thrown directly at the
window object. Looking at the high-level DOM structure starting from the anchor element we can see that this means
html is skipped:
But there is that logged item there though? 😩 That resulted from the event handler registered as an attribute on the
body element. Because
onerror is Window-reflected, the
body here is watching(or listening to) the
window object and not the
body resulting in it seeing(or hearing) the error event, and catching it. In other words, a window reflected event handler on the
body listens for events on the
window as opposed to the
body element itself.
And there you have it, the
body element in a nutshell. 🥜🌰 I hope you found this trip down, or should I see up, the body interesting and useful. Next up we will be looking at our first set of sectioning elements(the
body being the sectioning root), the
Until then, keep making the web awesome! 🌮