Next »
632/1956
« Previous

Test the event bubbling in JavaScript

Description

The following code shows how to test the event bubbling.

Example


<html>
<head>
<title>Event Bubbling</title>
<script type="text/javascript">
function mouseDown(nsEvent) {<!--  w  w w.j a  v a  2  s  . c  om-->
var theEvent = nsEvent ? nsEvent : window.event;
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
document.write(locString + " " + theSrc);
}

document.onmousedown=function (evnt) {
var theEvnt = evnt? evnt : window.event;
document.write(theEvnt.type);
}


window.onload=function () {
document.getElementById("first").onmousedown=mouseDown;
document.getElementById("second").onmousedown=function () {
document.write("Second event handler");
}
}

</script>

</head>
<body>
<div id="first" style="padding: 20px; background-color: #ffff0; width: 150px">
<div id="second" style="background-color: #ff0000; width: 100px; height: 100px"></div>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Test the event bubbling in JavaScript
Next »
« Previous