HTML and CSS Reference
In-Depth Information
appendText("outer Div Clicked");
function middleDivClick() {
appendText("middle Div Clicked");
function innerDivClick() {
appendText("inner Div Clicked");
function appendText(s) {
var li = document.createElement("li");
li.innerText = s;
function clearList() {
var ol = document.createElement("ol"); = "eventOrder";
<body id="bod">
<div id="outer">
<div id="middle" >
<div id="inner">
<ol id="eventOrder"> </ol>
<button type="button" id="clearButton">Clear</button>
When this HTML is rendered in the browser, the result is three nested div elements, as
shown in Figure 2-2. In this code are three div elements stacked on top of each other. The
styling is applied to provide a visual distinction between the boxes. When a div box is clicked,
the click event fires. The event listener code in the assigned handler outputs the name of the
clicked div to an ordered list so that the order in which the events are clicked is identified.
FIGURE 2-2 Three nested <div> elements to display the effect of event bubbling
Search WWH ::

Custom Search