By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,627 Members | 2,339 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,627 IT Pros & Developers. It's quick & easy.

What is this code doing?

P: n/a
What is the following code doing? I see evt and event but what is the difference?

<input type="radio" id="us_countryFlag1" name="us_country"
onclick="togglePurDec(event)">Yes

<script>
function togglePurDec(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;

Thanks,
Brett
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


Brett wrote:
What is the following code doing? I see evt and event but what is the difference?

<input type="radio" id="us_countryFlag1" name="us_country"
onclick="togglePurDec(event)">Yes
In HTML event handler attributes like onclick there is a de facto
standard that browsers implement an object named event that allows
access to event details so what you see above is an HTML event handler
attribute that makes use of that de facto standard and passes that event
object on to the function named togglePurDec.

<script>
function togglePurDec(evt) {
Here someone writes a function with a formal parameter called evt, you
can name a parameter any way you like as long as you follow the rules
for identifier names in JavaScript.
evt = (evt) ? evt : event;


Here it is tested whether the actual parameter passed in for "evt" has a
value that evaluates to true, if not then it is assigned the value of
the global variable event.
The reason for this is usual the difference between IE's event model and
the Netscape event model where in IE's event model there is a global
property
window.event
(which can as a global property also be accessed as
event
) while in Netscape's event model the event object is always passed as a
parameter to event handlers.
I am not sure the above check is needed in the example page, your
previous use of the function would pass in the event object to the
function in both event models as an HTML event handler attribute is used.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
Lee
Brett said:

What is the following code doing? I see evt and event but what is the
difference?

<input type="radio" id="us_countryFlag1" name="us_country"
onclick="togglePurDec(event)">Yes

<script>
function togglePurDec(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;

It's redundant. In that code, "evt" will always be equal to "event".

In some browsers, "event" is a global variable. In others, it's
not global, but is a local variable within the event handler.

The event handler in this case is "togglePurDec(event)".

The author is handling the situation in which "event" is defined
in the scope of togglePurDec(), but not in the scope of the event
handler. In that case, the value of "evt" would be undefined.

In practice, that situation doesn't exist. The global value will
be available in the event handler.

Jul 23 '05 #3

P: n/a
On 27 Aug 2004 07:13:40 -0700, Brett <ac*****@cygen.com> wrote:
What is the following code doing? I see evt and event but what is the
difference?
This will be rather difficult to explain properly, so I'll start with some
background.

As you know, there are many different types of events. Some are initiated
by the user, such as click or keypress events, whilst others are generated
by the browser, for example, load. Scripting languages allow you to attach
listeners (functions) to page elements, such as links and forms, to
perform certain actions when an event is fired.

When an event is fired, an object is created that contains information
about that event. The information available depends on what type of event
(mouse, keyboard, etc) occurred. This is all fairly standard stuff amongst
scriptable browsers. What isn't standard is the event models that each
browser follows, especially when it comes to how the event information is
made available.

The Netscape model[1] passed this information directly to listeners as an
argument (parameter). The Internet Explorer model keeps this information
in a global object. This is, of course, a problem: you have to look in two
different places, depending on what browser is being used, to find event
information. Worse than that, IE uses completely different property names
compared to the W3C model, which means that you also need to check
different properties once you've obtained the correct object.

This leads to a common starter to listener code:

function listener(e) {
e = e || window.event;
}

If executed in a DOM-compliant browser, the event object will be passed to
the function, so "e" will be a reference to that object. In IE, "e" will
be undefined. The logical OR (||) operator evaluates "e" first. If it
contains an object, that is assigned back to "e" (that is, no change). If
there is no object, the value of the window.event property is assigned to
"e".

This pattern isn't always necessary, though, as I'll explain below.
<input type="radio" id="us_countryFlag1" name="us_country"
onclick="togglePurDec(event)">Yes
Event listeners are functions. However, intrinsic events specified in
HTML, like onclick above, are just text. What the browser does is create
an anonymous function and places the text in it as code for that function.
The result is then added as a listener for that element.

The above could be achieved with:

object.onclick = function(event) {
togglePurDec(event);
};

where object is a reference to the INPUT element. This is how it would
appear in a DOM-compliant browser: the event object is passed as an
argument, and in this case (where the browser creates the listener), the
argument will be called "event". This is where the identifier comes from
the HTML you posted. However, it is meaningless in IE as event object is
always global. The function above would appear as:

object.onclick = function() {
togglePurDec(event);
};

So what does "event" refer to now? Very conveniently, the global object
provided by IE. When IE can't find it in the scope of the function, it'll
look for it, and find it, as a property of "window".
<script>
SCRIPT elements are required to have a type attribute.

<script type="text/javascript">
function togglePurDec(evt) {
evt = (evt) ? evt : event;
Because the browser creates the anonymous function, the event object will
have already been obtained when togglePurDec() was called. Therefore, the
line above is not needed. If you had created your own listener, and
assigned it directly to the element, it would be needed.
var target = (evt.target) ? evt.target : evt.srcElement;


However, this is still needed. DOM-compliant browsers expose the target
property which provides a reference to the element that was the target of
the event. For example, the element that was clicked in a click event. IE
exposes the srcElement property.

Hope that helps. If you want me to clarify anything, do ask.

Mike
[1] Now used by the World Wide Web Consortium's (W3C) Document Object
Model (DOM) Events Specification - a document that is meant to standardise
the event model.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.