HTML and CSS Reference
In-Depth Information
How Bubbling Works. In Figure 15.33, the document contains a < body > that con-
tains a < div > that contains a < p > that contains an < a > tag. Now assume that a click event
handler has been assigned to all four of them. When a user clicks the link, the events
bubble up. The click's original target, the < a >, gets to see the event first, and then passes
it upward to the < p > for further processing, which passes it on to the < div >, which finally
passes it up to the body of the document. This program was executed in three browsers,
Firefox, Opera, and Internet Explorer. All of them use bubbling
How Capturing Works. With capturing, when the user clicks the link, the link
doesn't get the event first. Instead, the event listener attached to the document grabs the
event first and processes it. (That is, it captures the event before it gets to its intended
target.) The event is then passed down to the < div >'s event handler. The event then goes
to the < p >, and finally to the < a >. That is, all of the clicked-on object's “ancestors” higher
up in the document capture the event for processing before sending it down the chain
to its intended target.
See event listeners for setting event capturing.
EXAMPLE 15.18
<html>
<title> Bubbling </title><head>
<script type="text/javascript">
/* This program behaves the same way in both Firefox and
Internet Explorer and Opera. The W3C states bubbling as
the default. */
1
var d1,p1,p2,a1;
2
window.onload=function(){
3
b1=document.getElementById('bdy1');
d1=document.getElementById('div1');
p1=document.getElementById('para1');
p2=document.getElementById('para2');
a1=document.getElementById('link1');
4
b1.onclick=iam;
d1.onclick=iam;
p1.onclick=iam;
p2.onclick=iam;
a1.onclick=iam;
}
5
function iam(){
alert(this.id);
}
</script>
</head>
6
< body id="bdy1" >
<h2>Bubble bubble...</h2>
< div id="div1" >
Continues
Search WWH ::




Custom Search