[thelist] Event capturing and bubbling

Richard Bennett richard.bennett at skynet.be
Tue Feb 12 03:46:00 CST 2002

----- Original Message -----
From: "Peter-Paul Koch" <gassinaumasis at hotmail.com>

>It will definitely have to go into my article.
Will this be published on your site, or somewhere else?

<So let me rephrase my question: Does anyone know any example of a script
<where an event bubbles up and is handled by two or more HTML elements? So
<user clicks on DIV, onClick of DIV is executed, event bubbles up and
<of document is executed.
Normal use would not often call for bubbling when both objects have the same
listener defined, but it could:
A large dragable rectangle (div) with some nested content, maybe four divs
that change color when clicked (a game or menu or something) if you want the
dragable DIV to be dragable from all points, even when clicking the nested
content, both the contents, and the DIV could have a mousedown listener.
Also, you might use a transparent cover-div, to prevent text-selection in a
DHTML window title-bar,
but allow it to bubble events to the _ and X icons, while it itself was the
drag-handle for the window.
And then of course there are the document-listeners, maybe you want to show
the mouse-coords in the status-bar, while moving the mouse. If other objects
on the page didn't bubble, the status display would stop when the mouse was
over the other objetcs, these objects could well have their own mouse-move

Another aspect worth highlighting in an article, is how stopping
event-bubbling can speed up CSS response on deeply nested elements,
especially in IE.
If you take a <a href> and give it a hover style in the stylesheet
(or was it only using onmouseover="this.style.borderWidth=4" - I'm not sure
Now nest it four or five deep (especially in tables), and put 50 on a page,
you can get visible delays when moving the  mouse over the elements. If you
put event.cancelBubble=true; in the onmouseover event, the delay is gone.
All that for IE-only of course.

Sounds a bit confusing maybe... my memory fails me.

More information about the thelist mailing list