HTML and CSS Reference
In-Depth Information
EXAMPLE
13.22 (
CONTINUED
)
3
if(
e.target
){
targ=e.currentTarget; targ=targ.id;
}
//
Firefox
4
else if(
e.srcElement
){
targ=e.srcElement.id
;}
//
Microsoft IE
5
alert(targ +" has recieved a "+e.type);
}
</script>
</head>
6
<body id="main"
onload="whichEvent(event)
;">
<br />
7
<div style="background-color:lightgreen">
<form id="form1"
onclick="whichEvent(event)
;">
<br />
<input type="text" id="textbox1"
onkeypress="whichEvent(event)
;" />
<br /><br />
<input type="button" value="rollover me" id="button1"
onmouseout="whichEvent(event)
;" />
<br />
</form>
</div>
</body>
</html>
EXPLANATION
1
Four types of events will be sent to this user-defined function: the
load
,
keypress
,
mouseout
, and
click
events. The purpose of the function is to show you how to
make a cross-compliant script to handle events on different browsers.
2
Unless the browser is Microsoft Internet Explorer, a reference to the
event
object
is passed as an argument to
whichEvent()
and called
e
as a parameter to the
which-
Event()
function. If not, Internet Explorer uses the
event
property of the window
object to get the value of
e
.
3
If the
target
property is applied to the object, then a Mozilla type browser is being
used. The
currentTarget
property returns the object from where the click originat-
ed. (To understand the flow of events, see the section “Capturing and Bubbling
(Trickle Down and Bubble Up)” on page 500.)
Using the
id
attribute of the object where the event occurs allows us to identify
what object received the event. For example, if the user clicks the form, with the
id
of
form1
, then we can see that the click originated in
form1
.
4
If the
srcElement
property is defined, then we are using Internet Explorer
5
The
id
of the element and the type of event that was fired are displayed.
6
When the page has loaded, the user-defined function,
whichEvent
, is triggered.
If this is a Mozilla type browser, the
event
object is passed to the function.
