<HTML>
<HEAD>
<TITLE>Test obsugi zdarze wedug modelu W3C</TITLE>
<STYLE TYPE="text/css">
TD {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// dodanie odbiorcw zdarze
function addBubbleListener(elemID) {
    document.getElementById(elemID).addEventListener("click", reportEvent, false)
}
function addCaptureListener(elemID) {
    document.getElementById(elemID).addEventListener("click", reportEvent, true)
}
// usunicie odbiorcw zdarze
function removeBubbleListener(elemID)  {
    document.getElementById(elemID).removeEventListener("click", reportEvent, false)
}
function removeCaptureListener(elemID) {
    document.getElementById(elemID).removeEventListener("click", reportEvent, true)
}
// wywietlenie informacji o obsugiwanym zdarzeniu
function reportEvent(evt) {
    if (evt.target.parentNode.id == "mySPAN") {
        var msg = "Zdarzenie jest obsugiwane przez element " + 
            evt.currentTarget.tagName + 
            " (faza obsugi = " + evt.eventPhase + ").\n"
        document.controls.output.value += msg
    }
}
// wyczyszczenie pola tekstowego wywietlajcego informacje szczegowe
function clearTextArea() {
    document.controls.output.value = ""
}
</SCRIPT>
</HEAD>
<BODY ID="myBODY">
<H1>Test obsugi zdarze wedug modelu W3C</H1>
<HR>
<P ID="myP"><SPAN ID="mySPAN">Ten akapit (element SPAN umieszczony wewntrz elementu 
P) moe odbiera zdarzenia "kliknicia".</SPAN></P>
<HR>
<TABLE CELLPADDING=5 BORDER=1>
<CAPTION STYLE="font-weight:bold">Panel sterowania</CAPTION>
<FORM NAME="controls">
<TR STYLE="background-color:#ffff99"><TD ROWSPAN=2>Odbiorca zdarze dla "propagacji": 
    <TD><INPUT TYPE="button" VALUE="Dodaj do elementu BODY" 
    onClick="addBubbleListener('myBODY')">
    <TD><INPUT TYPE="button" VALUE="Usu z elementu BODY" 
    onClick="removeBubbleListener('myBODY')">
</TR>
<TR STYLE="background-color:#ffff99">
    <TD><INPUT TYPE="button" VALUE="Dodaj do elementu P" 
    onClick="addBubbleListener('myP')">
    <TD><INPUT TYPE="button" VALUE="Usu z elementu P" 
    onClick="removeBubbleListener('myP')">
</TR>
<TR STYLE="background-color:#ff9999"><TD ROWSPAN=2>Odbiorca zdarze dla 
"przechwytywania": 
    <TD><INPUT TYPE="button" VALUE="Dodaj do elementu BODY" 
    onClick="addCaptureListener('myBODY')">
    <TD><INPUT TYPE="button" VALUE="Usu z elementu BODY" 
    onClick="removeCaptureListener('myBODY')">
</TR>
<TR STYLE="background-color:#ff9999"> 
    <TD><INPUT TYPE="button" VALUE="Dodaj do elementu P" 
    onClick="addCaptureListener('myP')">
    <TD><INPUT TYPE="button" VALUE="Usu z elementu P" 
    onClick="removeCaptureListener('myP')">
</TR>
<P>Wywietl informacje o zdarzeniu:&nbsp;<INPUT TYPE="button" VALUE="Usu informacje" 
onClick="clearTextArea()"><BR>
<TEXTAREA NAME="output" COLS="80" ROWS="6" WRAP="virtual"></TEXTAREA>
</FORM>
</TABLE>
</BODY>
</HTML>