Chapter 15 | The body
element
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.
The 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 addEventListener
inside of JavaScript, the unique characteristics of these event handler attributes warrant a short discussion.
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.
Event Handlers
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
window
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 body
element.
|
|
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 a
, body
, and html
is skipped:
- anchor
- body
- html
- window
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 article
, section
, nav
, and aside
elements.
Until then, keep making the web awesome! ๐ฎ