JavaScript DHTML/Window Browser/Browser Event

Материал из Web эксперт
Версия от 07:28, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Cancelling and Redirecting Events in IE5.5+

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML onClick="revealEvent("HTML", event)">
<HEAD>
<TITLE>Event Cancelling & Redirecting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// display alert with event object info
function revealEvent(elem, evt) {
    var msg = "Event (from " + evt.srcElement.tagName + " at "
    msg += event.clientX + "," + event.clientY + ") is now at the "
    msg += elem + " element."
    alert(msg)
}
function init() {
    document.onclick = docEvent
    document.body.onclick = docBodEvent
}
function docEvent() {
    revealEvent("document", event)
}
function docBodEvent() {
    revealEvent("BODY", event)
}
function buttonEvent(form) {
    revealEvent("BUTTON", event)
    // cancel if checked (IE4+)
    event.cancelBubble = form.bubbleCancelState.checked
    // redirect if checked (IE5.5+)
    if (form.redirect.checked) {
        document.body.fireEvent("onclick", event)
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Event Cancelling & Redirecting</H1>
<HR>
<FORM onClick="revealEvent("FORM", event)">
<P><BUTTON NAME="main1" onClick="buttonEvent(this.form)">
Button "main1"
</BUTTON></P>
<P><INPUT TYPE="checkbox" NAME="bubbleCancelState"
 onClick="event.cancelBubble=true">Cancel Bubbling at BUTTON<BR>
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.cancelBubble=true">
Redirect Event to BODY</P>
</FORM>
</BODY>
</HTML>



Cancelling and Redirecting Events in NN6+

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML onClick="revealEvent("HTML", event)">
<HEAD>
<TITLE>Event Cancelling & Redirecting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// display alert with event object info
function revealEvent(elem, evt) {
    var msg = "Event (from " + evt.target.tagName + " at "
    msg += evt.clientX + "," + evt.clientY + ") is now at the "
    msg += elem + " element."
    alert(msg)
}
function init() {
    document.onclick = docEvent
    document.body.onclick = docBodEvent
}
function docEvent(evt) {
    revealEvent("document", evt)
}
function docBodEvent(evt) {
    revealEvent("BODY", evt)
}
function buttonEvent(form, evt) {
    revealEvent("BUTTON", evt)
    // redirect if checked
    if (form.redirect.checked) {
        document.body.dispatchEvent(evt)
    }
    // cancel if checked
    if (form.bubbleCancelState.checked) {
        evt.stopPropagation()
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Event Cancelling & Redirecting</H1>
<HR>
<FORM onClick="revealEvent("FORM", event)">
<P><BUTTON NAME="main1" onClick="buttonEvent(this.form, event)">
Button "main1"
</BUTTON></P>
<P><INPUT TYPE="checkbox" NAME="bubbleCancelState"
 onClick="event.stopPropagation()">Cancel Bubbling at BUTTON<BR>
<INPUT TYPE="checkbox" NAME="redirect" onClick="event.stopPropagation()">
Redirect Event to BODY</P>
</FORM>
</BODY>
</HTML>



Document and Layer Event Capture and Release

/*
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)
    }
}
function setLayerCapture(enable) {
    if (!enable) {
        document.layer1.captureEvents(Event.CLICK)
    } else {
        document.layer1.releaseEvents(Event.CLICK)
    }
}
function doMainClick(e) {
    if (e.target.type == "button") {
        alert("Captured in top document")
    }
}
document.captureEvents(Event.CLICK)
document.onclick=doMainClick
</SCRIPT>
</HEAD>
<BODY>
<B>Document-level and/or Layer-level capture of Event.CLICK</B>
<HR>
<FORM>
<INPUT TYPE="checkbox" onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture
<INPUT TYPE="checkbox" onMouseDown="setLayerCapture(this.checked)" CHECKED>Enable Layer Capture
<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")
    }
}
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>



Event Bubbling Demonstration

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML onClick="alert("Event is now at the HTML element.")">
<HEAD>
<TITLE>Event Bubbles</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function init() {
    window.onclick = winEvent
    document.onclick = docEvent
    document.body.onclick = docBodEvent
}
function winEvent() {
    alert("Event is now at the window object level.")
}
function docEvent() {
    alert("Event is now at the document object level.")
}
function docBodEvent() {
    alert("Event is now at the BODY element.")
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Event Bubbles</H1>
<HR>
<FORM onClick="alert("Event is now at the FORM element.")">
<INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" 
    onClick="alert("Event started at Button: " + this.name)">
</FORM>
</BODY>
</HTML>



Handling onBlur and onFocus in Frames

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function gotFocus() {
 document.bgColor="#FFFFFF"
}
function lostFocus() {
 document.bgColor="#FF0000";
}
</SCRIPT>
</HEAD>
<BODY onFocus="gotFocus()" onBlur="lostFocus()">
<H1>Document 1</H1>
</BODY>
</HTML>



IE4+ Event Coordinate Properties

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/
<HTML>
<HEAD>
<TITLE>X and Y Event Properties (IE4+)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkCoords() {
    var form = document.forms[0]
    form.srcElemTag.value = "<" + event.srcElement.tagName + ">"
    form.clientCoords.value = event.clientX + "," + event.clientY
    form.pageCoords.value = (event.clientX + document.body.scrollLeft) + 
        "," + (event.clientY + document.body.scrollTop)
    form.offsetCoords.value = event.offsetX + "," + event.offsetY
    form.screenCoords.value = event.screenX + "," + event.screenY
    form.xyCoords.value = event.x + "," + event.y
    form.parElem.value = "<" + event.srcElement.offsetParent.tagName + ">"
    return false
}
function handleSize() {
    document.forms[0].resizeCoords.value = event.clientX + "," + event.clientY
}
</SCRIPT>
</HEAD>
<BODY onMouseDown="checkCoords()" onResize="handleSize()">
<H1>X and Y Event Properties (IE4+)</H1>
<HR>
<P>Click on the button and in the DIV/image to see the coordinate values for the
 event object.</P>
<FORM NAME="output">
<TABLE>
<TR><TD COLSPAN=2>IE Mouse Event Coordinates:</TD></TR>
<TR><TD ALIGN="right">srcElement:</TD><TD><INPUT TYPE="text" NAME="srcElemTag"
 SIZE=10></TD></TR>
<TR><TD ALIGN="right">clientX, clientY:</TD><TD><INPUT TYPE="text"
 NAME="clientCoords" SIZE=10></TD>
<TD ALIGN="right">...With scrolling:</TD><TD><INPUT TYPE="text"
 NAME="pageCoords" SIZE=10></TD></TR>
<TR><TD ALIGN="right">offsetX, offsetY:</TD><TD><INPUT TYPE="text"
 NAME="offsetCoords" SIZE=10></TD></TR>
<TR><TD ALIGN="right">screenX, screenY:</TD><TD><INPUT TYPE="text"
 NAME="screenCoords" SIZE=10></TD></TR>
<TR><TD ALIGN="right">x, y:</TD><TD><INPUT TYPE="text" NAME="xyCoords"
 SIZE=10></TD>
<TD ALIGN="right">...Relative to:</TD><TD><INPUT TYPE="text" NAME="parElem"
 SIZE=10></TD></TR>
<TR><TD ALIGN="right"><INPUT TYPE="button" VALUE="Click Here"></TD></TR>
<TR><TD COLSPAN=2><HR></TD></TR>
<TR><TD COLSPAN=2>Window Resize Coordinates:</TD></TR>
<TR><TD ALIGN="right">clientX, clientY:</TD><TD><INPUT TYPE="text"
 NAME="resizeCoords" SIZE=10></TD></TR>
</TABLE>
</FORM>
<DIV ID="display" STYLE="position:relative; left:100">
<IMG SRC="nile.gif" WIDTH=320 HEIGHT=240" BORDER=0>
</DIV>
</BODY>
</HTML>



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>



NN4 Event Capture and Release 1

/*
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)
    }
}
function doMainClick(e) {
    if (e.target.type == "button") {
        alert("Captured in top document")
    }
}
document.captureEvents(Event.CLICK)
document.onclick=doMainClick
</SCRIPT>
</HEAD>
<BODY>
<B>Basic document-level capture of Event.CLICK</B>
<HR>
<FORM>
<INPUT TYPE="checkbox" onMouseDown="setDocCapture(this.checked)" CHECKED>Enable Document Capture
<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>
</HEAD> 
<BODY> 
<FORM> 
<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>



NN4 Redirecting 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
    document.forms[0].setDocShortCircuit.checked = false
    docShortCircuit = false
}
function setLayerRoute(enable) {
    layerRoute = !enable
    document.forms[0].setLyrShortCircuit.checked = false
    layerShortCircuit = false
}
var docShortCircuit = false
var layerShortCircuit = false
function setDocShortcut(enable) {
    docShortCircuit = !enable
    if (docShortCircuit) {
        document.forms[0].setDocRte.checked = false
        docRoute = false
    }
}
function setLayerShortcut(enable) {
    layerShortCircuit = !enable
    if (layerShortCircuit) {
        document.forms[0].setLyrRte.checked = false
        layerRoute = false
    }
}
function doMainClick(e) {
    if (e.target.type == "button") {
        alert("Captured in top document")
        if (docRoute) {
            routeEvent(e)
        } else if (docShortCircuit) {
            document.layer1.document.forms[0].layerButton2.handleEvent(e)
        }
    }
}
document.captureEvents(Event.CLICK)
document.onclick=doMainClick
</SCRIPT>
</HEAD>
<BODY>
<B>Redirecting 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
<INPUT TYPE="checkbox" NAME="setDocShortCircuit" 
onMouseDown ="setDocShortcut(this.checked)">Send event to "layerButton2"<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
<INPUT TYPE="checkbox" NAME="setLyrShortCircuit" 
onMouseDown ="setLayerShortcut(this.checked)">Send event to "layerButton2"<P>
<HR>
<INPUT TYPE="button" VALUE="Button "main1"" NAME="main1" 
    onClick="alert("Event finally reached Button:" + this.name)">
</FORM>
<LAYER ID="layer1" LEFT=200 TOP=200 BGCOLOR="coral">
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function doLayerClick(e) {
    if (e.target.type == "button") {
alert("Captured in layer1")
        if (layerRoute) {
            routeEvent(e)
        } else if (layerShortCircuit) {
            document.forms[0].layerButton2.handleEvent(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>



NN6 Event Capture and Bubble

/*
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) {
    alert("Event is now at the window object level (" + getPhase(evt) + ").")
}
function docEvent(evt) {
    alert("Event is now at the **document** object level (" + getPhase(evt) + ").")
}
function docBodEvent(evt) {
    alert("Event is now at the BODY level (" + getPhase(evt) + ").")
}
function formCaptureEvent(evt) {
    alert("This alert triggered by FORM only on CAPTURE.")
}
function formBubbleEvent(evt) {
    alert("This alert triggered by FORM only on BUBBLE.")
}
// 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="button" VALUE="Button "main1"" NAME="main1"  onClick=
    "alert("Event is now at the button object level (" + getPhase(event) + ").")">
</FORM>
</BODY>
</HTML>



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>



Using the History Object to Navigate

<html>
<head>
<title>Using the History object</title>
</head>
<body>
<center>
<h1>Navigating with the History object</h1>
<form>
  <input type="button" value="Back" onClick="window.history.back()">  
  <input type="button" value="Forward" onClick="window.history.forward()">
</form>
</center>
</body>
</html>



Using the srcElement property

<HTML>
<HEAD>
<TITLE>srcElement Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function highlight() {
    var elem = event.srcElement
    if (elem.className == "bold") {
        document.styleSheets[0].rules[0].style.color = "red"
    } else {
        elem.style.color = "#FFCC00"
    }
}
function restore() {
    var elem = event.srcElement
    if (elem.className == "bold") {
        document.styleSheets[0].rules[0].style.color = "yellow"
    } else {
        elem.style.color = "red"
    }
}
</SCRIPT>
<STYLE TYPE="text/css">
.bold {font-weight:bold}
</STYLE>
</HEAD>
<BODY onMouseDown="highlight()" onMouseUp="restore()">
<H1>srcElement Property</H1>
<HR>
<P>One event handler...</P>
<UL>
<LI>A
<LI>BB
<LI>CCC
<LI>DDDD
</UL>
<P>
Text Text <span class="bold">Text</span> Text Text Text Text 
</P>
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Window_Browser/Browser_Event&oldid=3951»