HTML events can be associated with any HTML element. The HTML event can be triggered in two ways: the HTML element triggers the event, or the HTML element contains another element that triggers the event. HTML has a unique characteristic in that events can pass up a hierarchy of elements in a process called event bubbling. In event bubbling, an HTML element triggers an event that is sent from one HTML element to another HTML element. The idea is to pass the HTML event from the child to the parent, and to continue that event-chaining process until the last parent is called. Typically, the last parent to process a bubbling HTML event is the HTML document.
Consider the following HTML, which illustrates event bubbling:
1. At the time of this writing, there exists a “hack” that makes it possible to load a script that violates the same origin policy. The technique is considered a hack because it is a loophole that most likely will be closed at some later point and is a security issue.
<body>
<h1>Decoupled Navigation Pattern: Action Examples</h1>
<div id="div" onclick="OnClick( event)" style="background:yellow;"> <p id="paragraph">Hello</p>
<table border="1"> <tr id="Row 1">
<td id="Row 1 Cell 1">OnClick</td> </tr>
<tr id="Row 2">
<td id="Row 2 Cell 1">
<input type="button" value="Button" id="Row 2 Button 1"/> </td> </tr> <tr> <td id="eventDestination">Nothing yet</td> </tr> </table> </div> </body>
The example HTML content has a header (h1), block division (div), paragraph (p), table (table), table row (tr), and table cell (td). Each element is embedded in another element. Put simply, there is a block division element embedding a table, which is embedding a table row, and so on. Graphically, the structure would be similar to Figure 6-9.
Even though this discussion of the HTML structure might seem basic and long-winded, it is important to realize that there is a nested structure because HTML event bubbling and how it occurs is directly related to this structure.
Looking back at the HTML code, you can see that the div HTML element has the onclick
attribute, which implements the onclick event. From a traditional programming perspective, the defined onclick event would capture only click events that relate directly to the div element. With event bubbling, the defined event will be triggered for all click events that involve the div
element and one of its descendent elements. This means that if the nested button is clicked, the OnClick function is called. Event bubbling is a clever way to define collecting-type events that can be triggered by multiple HTML elements. However, event bubbling works only if the event bubbles. There are some HTML events that will not bubble and are specific to the HTML element.
Let’s say that an event has been triggered and is bubbling up the chain. If the event is caught and processed, the caught event can be canceled. The way to cancel the event is to return false, as illustrated by the following example:
<div onclick="return false" />
Canceling an event that is bubbling works only if the event can be canceled. Canceling every onclick event is a solution when you don’t want the browser to process certain events to disable functionality. In the example HTML, the event called the OnClick function will process the click event for multiple HTML elements. The implementation of the function is as follows:
function OnClick( evt) {
evt = (evt) ? evt : ((event) ? event : null); if( evt) {
var elem = (evt.target) ? evt.target :
((evt.srcElement) ? evt.srcElement : null); if( elem) { document.getElementById( "eventDestination").innerHTML = "Click (" + elem.id + ")"; } } }
When an HTML event is triggered, the details of the event are not cross-browser compat- ible. To make the event cross-browser compatible, several extra steps need to be carried out. The function OnClick has a single parameter, evt, which is supposed to represent the event. But the function signature for an event, which has a single parameter, is not recognized in all browsers. The following source code is used to extract the event object instance regardless of browser used:
The statement tests whether the variable evt is null. If the value evt is not null, evt is assigned to evt, which in effect does nothing. The assignment is a placeholder assignment to provide an option to evt being null. However, if evt is null, most likely Microsoft Internet Explorer is being used. Then the variable evt needs to be assigned to the event variable, which is always defined in Internet Explorer.
The test is not necessary if the method is called as illustrated in the example. The reason has to do with how the OnClick function is called, which is illustrated again here:
<div id="div" onclick="OnClick( event)" style="background:yellow;">
Notice that OnClick is called with the event object instance and is compatible with Microsoft Internet Explorer. What is important to realize is that the event object instance is valid only in the context of the attribute onclick when using Mozilla-compatible browsers.
When an HTML event is caught by a parent of the HTML element that triggers the event, the parent does not have immediate knowledge of the source of the event. This is the case of the OnClick function example implementation in that it can be called in multiple contexts, such as clicking the button, table cell, and so on. You will want to know the source element for manipulation purposes, but like the HTML event object, the property for the source element depends on the browser used. The source element can be found by referencing either the
target or srcElement property. The following source code from OnClick illustrates how to retrieve the element that originally triggered the event:
if( evt) {
var elem = (evt.target) ? evt.target :
((evt.srcElement) ? evt.srcElement : null);
In the source code example, it is assumed that the evt variable instance is valid. The variable
elem references the HTML element responsible for the event. After the assignment character, there is an existence test of either evt.target or evt.srcElement. If the browser is Mozilla based, the property evt.target exists, and if the browser is Microsoft Internet Explorer, the property evt. srcElement exists. Other browsers will have a valid instance for one of the two properties.
After both the event and target object instances have been retrieved, you can assign an HTML element innerHTML property to the identifier of the element that generated the event. Because all the HTML elements have been associated with an identifier, clicking on a cell of a table generates the identifier in the last row of the table, as illustrated in Figure 6-10.
Figure 6-10 shows two balloons highlighted. The first balloon with the number 1 shows where a user clicked. This user clicked on the first row of the table. This generates an onclick
event, which is given first to the td element, then to the tr element, then to the table element, and then finally to the div element—which implements the onclick and generates the output. The generated output is highlighted in the second balloon.
Figure 6-10. Sequence of steps: clicking on an HTML element and identifying the results