Preventing Bubble and Capture

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

JAVASCRIPT DHTML TUTORIALS » Window Browser » Browser Event »

Preventing Bubble and Capture



/*
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) {
    if (evt.target.type == "button") {
        alert("Event is now at the window object level (" + getPhase(evt) + ").")
    }
}
function docEvent(evt) {
    if (evt.target.type == "button") {
        alert("Event is now at the **document** object level (" + 
getPhase(evt) + ").")
    }
}
function docBodEvent(evt) {
    if (evt.target.type == "button") {
        alert("Event is now at the BODY level (" + 
getPhase(evt) + ").")
    }
}
function formCaptureEvent(evt) {
    if (evt.target.type == "button") {
        alert("This alert triggered by FORM only on CAPTURE.")
        if (document.forms[0].stopAllProp.checked) {
            evt.stopPropagation()
        }
    }
}
function formBubbleEvent(evt) {
    if (evt.target.type == "button") {
        alert("This alert triggered by FORM only on BUBBLE.")
        if (document.forms[0].stopDuringBubble.checked) {
            evt.preventBubble()
            }
    }
}
// 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="checkbox" NAME="stopAllProp">Stop all propagation at FORM<BR>
<INPUT TYPE="checkbox" NAME="stopDuringBubble">Prevent bubbling past FORM
<HR>
<INPUT TYPE="button" VALUE="Button 'main1'" NAME="main1"  onClick=
    "alert('Event is now at the button object level (' + getPhase(event) + ').')">
</FORM>
</BODY>
</HTML>