NN6 Event Capture and Bubble

NN6 Event Capture and Bubble : Browser Event : Window Browser JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Window Browser » Browser Event »

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>