ok, before going back to your problem, I’ll talk a bit about Events, as this is necessary to understand the solution.
How does HTML code get into JavaScript?
the HTML source code is translated for JavaScript so that it can alter the HTML’s appearance. it is of utmost importance to understand this, otherwise the HTML/JavaScript interaction stays a mystery.
when the browser loads the HTML source code, it internally creates a representation of the code. thus each tag and each attribute and each text gets assigned a special object. the mechanism responsible for that is called DOM (Document Object Model). so what you have access to in JavaScript is not the HTML itself, but its object representation in the browser.
it is important to understand that an HTML attribute is
not the same as the HTML attribute’s object equivalent in JavaScript.
rule of thumb: in JavaScript, everything is an object (and I mean everything).
What is an Event?
an event is some kind of action that occurs in the document, for example a click, a load, a mouse moving, all kinds of stuff. the events that are possible are standardised by the W3C in the DOM .
How does an Event work in JavaScript?
this is implemented in JavaScript through the use of the Event object, i.e. the user’s action (e.g. a click) is translated/modelled into a native JavaScript object (named "Event"). then this object travels through the document tree (resp. its objects that represent a HTML element) where it can trigger programmatic actions. these events are created automatically, you don’t have to do anything there.
How do I make an Event trigger something?
this is called Event Handling (making an event do something useful). the basic idea is that you wait for an event object to pass by. therefore you add a programming instruction to the object (the HTML element object) where the event passes through.
this can be done in several ways:
* inline javascript
: only do that when there is no other possibility.
* DOM-0 Events: before there was a standard, browser vendors invented a way to handle events. this is done by using event properties (a property is part of an object, it is not the same as an HTML attribute). each HTML element object in JavaScript can be assigned an event property consisting of "on" + the event name (e.g. "click" => onclick). to this property a function variable must be passed. additionally, this function may only contain a single parameter that is the Event object.
- function event_handler(evt)
-
{
-
alert("this is a " + evt.type + " event");
-
}
-
-
// div being a <div> element in JavaScript
-
// note the missing parentheses
-
div.onclick = event_handler;
according to the standard, when the click event reaches that <div> element, the function event_handler is executed with the click event object as parameter. additionally, the scope of the function changes. until now, the function belonged to the global scope, but now it is owned by the executing element object. this manifests in the system variable
this, which changes from
window to
div (a very convenient way to access the current element!)
note: IE does not adhere to the standard. instead of passing an event through the document tree, it provides the event object as a global, only triggering the function to execute. (you already used the work-around for that)
* DOM-2: eventually, the W3C released a standard how Events should work. this brought along some very convenient features:
- you can assign multiple event handlers
- the event travels up and down in the document tree (bubbling and capturing)
- you can influence the event flow (canceling the event, preventing the default action an event would usually trigger).
- function event_handler_1(evt)
-
{
-
alert("I’m a " + this.tagName + " element");
-
// cancel the event
-
evt.stopPropagation();
-
}
-
-
function event_handler_2(evt)
-
{
-
alert("this is a " + evt.type + " event");
-
}
-
// catch event when it goes down in the document tree
-
div.addEventListener("click", event_handler_1, true);
-
// catch event when it goes up in the document tree
-
// this is the same direction as in DOM-0
-
div.addEventListener("click", event_handler_2, false);
-
-
/* you may guess what actions will happen … */
and now the bad news: IE doesn’t implement that at all. MS decided to go its own totally different way. there is also no easy work-around to make your code cross-browser compatible for the full set of features.
5
