<HTML>
<HEAD>
<TITLE>Metoda dispatchEvent()</TITLE>
<STYLE TYPE="text/css">
#mySPAN {font-style:italic}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// gromadzimy informacje o kilku waciwociach zdarzenia
function getEventProps(evt) {
    var msg = ""
    var elem = evt.target
    msg += "event.target.nodeName: " + elem.nodeName + "\n"
    msg += "event.target.parentNode: " + elem.parentNode.id + "\n"
    msg += "przycisk: " + evt.button
    return msg
}

// procedura obsugi zdarzenia onClick dla elementw body, myP, and mySPAN
function bodyClick(evt) {
    var msg = "Zdarzenie click przetworzone w elemencie BODY\n\n"
    msg += getEventProps(evt)
    alert(msg)
    checkCancelBubble(evt)
}
function pClick(evt) {
    var msg = "Zdarzenie click przetworzone w elemencie P\n\n"
    msg += getEventProps(evt)
    alert(msg)
    checkCancelBubble(evt)
}
function spanClick(evt) {
    var msg = "Zdarzenie click przetworzone w elemencie SPAN\n\n"
    msg += getEventProps(evt)
    alert(msg)
    checkCancelBubble(evt)
}

// przerwanie propagacji zdarze jeli jest zaznaczone pole wyboru
function checkCancelBubble(evt) {
    if (document.controls.bubbleOn.checked) {
        evt.stopPropagation()
    }
}

// przypisanie procedur obsugi zdarzenia onClick trzem elementom strony
function init() {
    document.body.onclick = bodyClick
    document.getElementById("myP").onclick = pClick
    document.getElementById("mySPAN").onclick = spanClick
}
// wywoanie metody dispatchEvent() dla obiektu o podanym identyfikatorze
function doDispatch(objID, evt) {
    var newEvt = document.createEvent("MouseEvent")
    newEvt.button = 3
    document.getElementById(objID).dispatchEvent(newEvt)
    // nie przekazujemy klikni mysz
    evt.stopPropagation()
}
</SCRIPT>
</HEAD>
<BODY ID="myBODY" onLoad="init()">
<H1>Metoda dispatchEvent()</H1>
<HR>
<P ID="myP">Oto akapit <SPAN ID="mySPAN">(zawierajcy element SPAN)</SPAN>. Do niego 
bd kierowane zdarzenia click.</SPAN></P>
<HR>
<P><B>Panel sterowania</B></P>
<FORM NAME="controls">
<P><INPUT TYPE="checkbox" NAME="bubbleOn" onClick="event.stopPropagation()">Przerwanie 
propagacji zdarze.</P>
<P><INPUT TYPE="button" VALUE="Generowanie zdarzenia click dla elementu BODY" 
onClick="doDispatch('myBODY', event)"></P>
<P><INPUT TYPE="button" VALUE="Generowanie zdarzenia click dla elementu myP" 
onClick="doDispatch('myP', event)"></P>
<P><INPUT TYPE="button" VALUE="Generowanie zdarzenia click dla elementu mySPAN" 
onClick="doDispatch('mySPAN', event)"></P>
</FORM>
</BODY>
</HTML>