Understanding Events

[UNIMENT]

Ever wondered why, when declaring an event handler, you must not have the parentheses?

So have I. This is what I suspect is the reason behind it:




There's a difference between events in HTML and events in pure JavaScript. When you say as a tag's attribute:

onclick="alert('I\'ve been clicked.');"

Any code within the attribute is executed using an equivalent to the

eval()

function. The reason for doing so is obvious: The code is contained within quotes, so you might as well

eval()

it. The disadvantage to this is that in Netscape (NS6 included), no Event object is passed to the function as a parameter (this will be discussed later).


Now for the pure JavaScript. When you say this:

function doWhat() {
 alert('Click!');
}
document.getElementById('myDiv').onclick=doWhat;

What happens is that you give

myDiv

's

onclick

property the value of the

doWhat

function. Now, why's that? Why not just use normal syntax?
It is normal syntax. Functions can be values, too. For instance:

function myFunction() {
 alert("I've been called!");
}
var myMethod=myFunction;
myMethod();

The above code is perfectly valid syntax. When you tell a variable to hold the value of a function (not the function's return value), you effectively create a new function. Just think now: the

onclick

variable is set to be a function.

Why would you want

onclick

to be a function? Well, quite simple. When an object gets clicked, the browser then calls the

onclick()

function (if it exists). This then executes the code that you assigned to

onclick

.


Then you see that if you want to get rid of an event handler, you can simply set the function to do nothing:

function blank() {}
document.getElementById('myDiv').onclick=blank;

Or, if you just want to do it nice and quickly, without defining a whole new named function:

document.getElementById('myDiv').onclick=function() {};

This way, you can cancel an old event handler and make it do nothing.


Now... For the details on the Event object.
In Internet Explorer, when an Event occurs, a new Object called

event

is created. Once the code being called is finished executing, the

event

Object is destroyed (In the same manner as the

this

Object).
In Netscape, however, although the

this

Object is created and destroyed the same way as in IE, no Object called

event

is created. Rather, a similar Event object is passed as an argument.

function doWhat(myEvent) {

} // Etc ...

From there, the

myEvent

Object (often simply called

e

) is manipulated in much the same manner as in IE.

The disadvantage to passing the Event object as an argument is that, if you have your event defined as an HTML attribute, it cannot be detected (to my knowledge) because you can't pass an argument to a string like that. So, in Netscape, although you can detect the

this

object in your HTML attributes, you can't detect any

event

object. Counter-intuitive? Yes. Generally, though, if you need to detect the Event Object, you will be doing it without using attribute event handlers anyway.