Code for Event Capture/Bubble Demos

Home Page

DOM Tutorials

Using Events

Setting Events

Event Capture and Bubbling

Event Code

Code for Event Examples

Code for Event Capture

var doc;

function docClick()
{
    doc.open();
    doc.writeln("<html><head></head><body bgcolor=\"#ffffff\">");
    doc.writeln("Sequence of events:<br>");
    doc.writeln("<p>Document clicked.</p>");
}

function divClick()
{
    doc.writeln("<p>Div clicked</p>" );
}

function pClick()
{
    doc.writeln("<p>Paragraph clicked</p>" );
}

function imgClick()
{
    doc.writeln("<p>Image clicked</p></body</html>" );
    doc.close();
}

function setup()
{
    var obj;
    setBrowser();
    doc = bottomFrame.document;
    if (isNav6)
    {
        topFrame.document.addEventListener( "click", docClick, true );
        obj = getObject( "theDiv" );
        obj.addEventListener( "click", divClick, true );
        obj = getObject( "thePara" );
        obj.addEventListener( "click", pClick, true );
        obj = getObject( "theImg" );
        obj.addEventListener( "click", imgClick, true );
    }
}

Code for Event Bubbling

function docClick()
{
    doc.writeln("<p>Document clicked.</p></body></html>");
    doc.close();
}

function divClick()
{
    doc.writeln("<p>Div clicked</p>" );
}

function pClick()
{
    doc.writeln("<p>Paragraph clicked</p>" );
}

function imgClick()
{
    doc.open();
    doc.writeln("<html><head></head><body bgcolor=\"#ffffff\">");
    doc.writeln("Sequence of events:<br>");
    doc.writeln("<p>Image clicked</p>" );
}

function setup()
{
    var obj;
    setBrowser();
    doc = bottomFrame.document;
    doc.writeln("<html><head><body bgcolor=\"#ffffff\">");
    if (isNav6)
    {
        topFrame.document.addEventListener( "click", docClick, false );
        obj = getObject( "theDiv" );
        obj.addEventListener( "click", divClick, false );
        obj = getObject( "thePara" );
        obj.addEventListener( "click", pClick, false );
        obj = getObject( "theImg" );
        obj.addEventListener( "click", imgClick, false );
    }
}

Note: the setup() function is invoked as follows:

<frameset cols="150,*" onLoad="setup();">

Document in Left Frame

<body bgcolor="#ffffff">
<div id="theDiv">
<p id="thePara">
Please click the W3C logo.
<br>
<img id="theImg" src="w3c_home.png" width="72" height="48"
    alt="W3C logo">
</p>
</div>
</body>

Capturing Events