NN6 Event Capture and Bubble
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>W3C DOM Event Propagation</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function init() {
// using old syntax to assign bubble-type event handlers
window.onclick = winEvent
document.onclick = docEvent
document.body.onclick = docBodEvent
// turn on click event capture for two objects
document.addEventListener("click", docEvent, true)
document.forms[0].addEventListener("click", formCaptureEvent, true)
// set event listener for bubble
document.forms[0].addEventListener("click", formBubbleEvent, false)
}
function winEvent(evt) {
alert("Event is now at the window object level (" + getPhase(evt) + ").")
}
function docEvent(evt) {
alert("Event is now at the **document** object level (" + getPhase(evt) + ").")
}
function docBodEvent(evt) {
alert("Event is now at the BODY level (" + getPhase(evt) + ").")
}
function formCaptureEvent(evt) {
alert("This alert triggered by FORM only on CAPTURE.")
}
function formBubbleEvent(evt) {
alert("This alert triggered by FORM only on BUBBLE.")
}
// reveal event phase of current event object
function getPhase(evt) {
switch (evt.eventPhase) {
case 1:
return "CAPTURING"
break
case 2:
return "AT TARGET"
break
case 3:
return "BUBBLING"
break
default:
return ""
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>W3C DOM Event Propagation</H1>
<HR>
<FORM>
<INPUT TYPE="button" VALUE="Button 'main1'" NAME="main1" onClick=
"alert('Event is now at the button object level (' + getPhase(event) + ').')">
</FORM>
</BODY>
</HTML>
Related examples in the same category