HTML and CSS Reference
In-Depth Information
EXAMPLE
15.19 (
CONTINUED
)
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(event)
{
if (!e){
e = window.event;
6
e.cancelBubble = true
;/*
Microsoft IE
*/
}
else{
7
e.stopPropagation();
/*
W3C
*/
}
// stop all other targets with event listeners from
// triggering this event
}
</script>
</head>
8 <body id="bdy1">
<h2>Bubble bubble...</h2>
<div id="div1">
9 <p id="para1">Some text in a paragraph element.</p>
<p id="para2">Another paragraph element with text.
10 <a id="link1" href="#">link</a>
</p>
</div>
</body>
</html>
EXPLANATION
1
Global variables are declared that will be used in the function that follows.
2
Once the page has loaded the onload event handler is triggered, causing the anon-
ymous function to be executed.
3
The
document.getElementById()
method returns references to all of the HTML el-
ements with
id
attributes.
4
Each of the element references is assigned the
onclick
event property and its value,
a function called
iam()
.