Before your mastery of dHTML is complete, you should know about the event object. Both 4.0 browsers contain the event object. It is generated whenever
an event is created, such as clicking on a clickable object, moving the
mouse, or focusing a form element. The event object is created and passed along
to the function handling the event.
Below are descriptions of properties of the event object and the ways Netscape Navigator and Internet Explorer deal with them:
The 4.0 browsers have added some new events as well:
| onDblClick |
When the mouse is clicked twice |
| onKeyDown |
When a keyboard key is pressed down |
| onKeyPress |
When a key is pushed down and up |
| onKeyUp |
When a pressed key is released |
| onMouseDown |
When the mouse is pressed |
| onMouseMove |
When the mouse is moved |
| onMouseUp |
When the mouse is released |
| onResize |
When the window is resized |
Along with adding new events, the 4.0 browsers also add new ways of dealing with events, although (shudder) they do so in two different ways. Netscape
does "event capturing," and Internet Explorer does "event bubbling."
Event capturing is necessary for Netscape to handle any event, such as mouseMove or
the keyPress, that
doesn't implicitly reference a tag or an element. You need to tell the client to pay attention to these events
and tell it what function to use to handle them. This uses the captureEvents method
of the window object (this means that you can only use this with window-level
granularity) to state which event you are capturing:
window.captureEvents(Event.MOUSEMOVE);
Notice how the specific event was referenced without the on as part
of its name? You've just told Netscape to take all mouseMove events that occur
in that window and capture them. Then you need to tell Netscape what to do with
those captured events. And notice that the on reappears.
window.onMouseMove = handlerFunction;
function handerFunction(yourEvent) {
alert(yourEvent.screenX);
}
This would produce an annoying example that would demonstrate the routing of
your event. Every time you moved the mouse, an alert box would pop up to tell
you its horizontal position. Events that are handled in this way are passed a
reference to the event object. And from here you can extract the necessary
information. Then, once you tire of capturing the events, you can release them
with
window.releaseEvents(Event.MOUSEMOVE);
and no more events of this type will be captured.
Internet Explorer uses a different method of handling events, called "event
bubbling." In this method, if you have a structure like this:
<body onclick="bloorf()">
<p onclick="baz()">
<em onclick="bar()">
<strong onclick="foo()">Click on me</strong>
</em>
</p>
</body>
then if you click on the text in the strong tags, it receives an onClick
event (if it is set up to handle it with a script, it will do so), then
it sends the onclick event up to the <em> tag, which handles it and
sends it on up to the <p> tag, etc., etc., all the way up to the window.
This way each element can deal with the click in its own way. But if you ever
want to stop this bubbling up, you can cancel the bubble (or in my mind, you
pop it).
<script>
function foo() {
doSomeThing();
this.event.cancelBubble = true;
}
</script>
So if you don't want your particular event to bubble up to all its containing
tags, you can prevent it from doing so.
As you can see, while similar events exist in both browsers, lots of conditionalization
needs to be done at every step, and there is no easy way to map them to one
syntax.
next page»
