.gif)
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
<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>
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>
Event Bubbling Demonstration
<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>
