NN4 Capture, Release, and Route Events

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function setDocCapture(enable) {
    if (!enable) {
        document.captureEvents(Event.CLICK)
    } else {
        document.releaseEvents(Event.CLICK)
        document.forms[0].setDocRte.checked = false
        docRoute = false
    }
    
}
function setLayerCapture(enable) {
    if (!enable) {
        document.layer1.captureEvents(Event.CLICK)
    } else {
        document.layer1.releaseEvents(Event.CLICK)
        document.forms[0].setLyrRte.checked = false
        layerRoute = false
    }
}

var docRoute = false
var layerRoute = false
function setDocRoute(enable) {
    docRoute = !enable
}
function setLayerRoute(enable) {
    layerRoute = !enable
}
function doMainClick(e) {
    if (e.target.type == "button") {
        alert("Captured in top document")
        if (docRoute) {
            routeEvent(e)
        }
    }
}
document.captureEvents(Event.CLICK)
document.onclick=doMainClick
</SCRIPT>
</HEAD>
<BODY>
<B>Capture, Release, and Routing of Event.CLICK</B>
<HR>
<FORM>
<INPUT TYPE="checkbox" NAME="setDocCap"
 onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture&nbsp;
<INPUT TYPE="checkbox" NAME="setDocRte"
 onMouseDown ="setDocRoute(this.checked)">And let event continue<P>
<INPUT TYPE="checkbox" NAME="setLyrCap"
 onMouseDown ="setLayerCapture(this.checked)" CHECKED>Enable Layer Capture&nbsp;
<INPUT TYPE="checkbox" NAME="setLyrRte"
 onMouseDown ="setLayerRoute(this.checked)">And let event continue
<HR>
<INPUT TYPE="button" VALUE="Button 'main1'" NAME="main1" 
    onClick="alert('Event finally reached Button:' + this.name)">
</FORM>
<LAYER ID="layer1" LEFT=200 TOP=150 BGCOLOR="coral">
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function doLayerClick(e) {
    if (e.target.type == "button") {
        alert("Captured in layer1")
        if (layerRoute) {
            routeEvent(e)
        }
    }
}
layer1.captureEvents(Event.CLICK)
layer1.onclick=doLayerClick
</SCRIPT>
</HEAD> 
<BODY> 
<FORM> 
&nbsp;layer1<BR><P><INPUT TYPE="button" VALUE="Button 'layerButton1'" 
    NAME="layerButton1" 
    onClick="alert('Event finally reached Button:' + this.name)"></P> 
<P><INPUT TYPE="button" VALUE="Button 'layerButton2'" 
    NAME="layerButton2" 
    onClick="alert('Event finally reached Button:' + this.name)"></P>
</FORM>
</BODY>
</LAYER>
</BODY>
</HTML>

Related examples in the same category

1.	Using the History Object to Navigate
2.	Handling onBlur and onFocus in Frames
3.	IE4+ Event Coordinate Properties
4.	Using the srcElement property
5.	NN4 Event Capture and Release 1
6.	Document and Layer Event Capture and Release
7.	NN4 Redirecting Events
8.	Event Bubbling Demonstration
9.	Cancelling and Redirecting Events in IE5.5+
10.	NN6 Event Capture and Bubble
11.	Preventing Bubble and Capture
12.	Cancelling and Redirecting Events in NN6+

NN4 Capture, Release, and Route Events : Browser Event « Window Browser « JavaScript DHTML

Related examples in the same category