 The DOM event flow
The DOM introduces a new concept for detecting events and assigning
corresponding event handlers to react to them. Naturally, it also supports
the 2 conventional techniques discussed earlier.
In order to fully understand and appreciate this new method, we must
first understand how events are handled in the DOM.
-A roundtrip ticket- event capture and event bubbling
The DOM interprets all user action very differently from the user. To
you, clicking on a link is just that, but to the DOM, an entire process is
invoked that takes the action on a trip around the block and back. Ok,
more explanation is definitely needed.
Let's take the simple user action of moving the mouse over a link as an
example. To the DOM, the following events in fact took place, and in that
order:
1) You moved your mouse over the document
2) You moved your mouse over any tags containing the target <A> tag
3) You moved your mouse over the <A> tag in question
No, we're not quite yet done. From here the event then travels back:
4) You moved your mouse over any tags containing the target <A> tag
5) You moved your mouse over the document. (the end).
Yes, the DOM likes to get very technical. Using a diagram, here's what
just happened:
Mouse over document
-->Mouse over any containment tags of <A> --> Mouse over
destination <A> -->
Mouse over any containment tags of <A> --> Mouse over document
The above "roundtrip" model is used by the DOM to interpret most
events. We call the event as it travels to the intended element (part in
blue) event capture, and as it travels back event bubble.
-Event Capture
So, event capture basically refers to the process of an event as it
travels to its destination element. Actually, it further refers to the
ability to "capture", or intercept this event.
If event capture sounds suspiciously familiar, it should. NS4 has long
supported event capture, though the syntax:
element.captureEvents()
In other words, when you click on a link in NS4 for example, this event
first travels through the document, then incrementally downwards to all
containing elements of the link until eventually reaching the link itself.
-Event bubble
Event bubble is the exact opposite of event capture, and
points to the traveling upwards of an event from the source element to the
topmost, or document. IE4 revolutionized event handling by being the first
major browser to support event bubble. An event such as clicking on a link
causes it to travel upwards, visiting all of the link's container tags
until eventually reaching the top of the document source.
Consider the following HTML code:
<table onClick="alert('Hello!')">
<b><a href="#">This is some text</a></b>
</table>
Here we define an onClick event handler inside the TABLE.
With event bubbling, merely clicking on the containing link fires this
event (and subsequently the alert message), since the event traverses
upwards from A to B and eventually reaching TABLE.
|
