<!-- Javascript: event object attributes -->
<HTML>
<HEAD>
<TITLE>Event object attributes</TITLE>
<SCRIPT>
// a function that displays some event object attribute values
// special code to support IE (since it doesn't support
// the standard yet).
function displayEvent(event) {
var txt = "";
txt += "Event Name: " + event.type+"<BR>";
txt += "clientX,clientY: "+ event.clientX +
"," + event.clientY + "<BR>";
if (event.srcElement) {
// this means we are running on IE
targ = event.srcElement;
} else {
targ = event.currentTarget;
}
txt += "ID: " + targ.id+"<BR>";
txt += "tag: " + targ.tagName + "<BR>";
txt += "innerHTML: " + targ.innerHTML+"<BR>";
r = document.getElementById("result");
r.innerHTML = txt;
}
</script>
</HEAD>
<BODY>
<P>Move the mouse over the level 2 header, or click on the paragraph or button
to generate events.</P>
<!-- this tag triggers an event when the mouse moves over it -->
<H2 ID=one onMouseOver="displayEvent(event)">I AM A LEVEL 2 HEADER</H2>
<!-- this tag triggers an event when clicked on -->
<P ID=two onClick="displayEvent(event)">
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
</P>
<!-- this tag triggers an event when clicked on -->
<INPUT TYPE=BUTTON VALUE="I'm a button!"
onClick="displayEvent(event)">
<HR>
<!-- this tag initially has no content
it will be changed when an event happens
-->
<P ID=result></P>
</BODY>
</HTML>
|