I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

A note about event bubbling

Just now I delivered a project during the making of which I noted a feature of event bubbling that, though totally logical, came as a surprise to me. No doubt someone else will be surprised, too, and may even be able to use it in a project.

The project was an adaptation of my Site Survey script that's treated in chapter 6 of the book. In the standard script, a survey popup is opened as soon as the user clicks anywhere. However, for this version of the script I had to implement a special bar with a Yes/No option in which the user can indicate whether he wants to participate in the survey. Only when the user clicks Yes (or when he doesn't answer on three consecutive pages) is the popup opened.

I open the popup through my addEventSimple script:

addEventSimple(document,"click",ST_openPopup);

Now the event is set for the bubbling phase: ie. any time a user clicks anywhere on the page, onclick event handlers of the element she clicks on are handled first (if any), after which the click event bubbles up to the document and my ST_openPopup() function is executed. Usually I set this event handler immediately, but in the current version I set it only after the user has agreed to the survey.

The Yes/No buttons both have an onclick event handler, too. Appropriate actions are taken, and then the special bar with the buttons disappears.

The appropriate action on the Yes button is, among others, setting the onclick event handler on the document. When I tested this bit of the script, the popup opened as soon as I clicked on the Yes button. I'd expected I'd have to code this explicitly, but event bubbling took care of the dirty bits for me. What a pleasant surprise.

Picture the situation:

1. Initially there's a button with an onclick event handler. The document doesn't have any.
2. The user clicks on the button and generates a click event.
3. As soon as the event enters the bubbling phase (I never use the capturing phase) the onclick event handler of the button is executed. Among other things, it sets an onclick event handler on the document.
4. When the event handler is done the event bubbles up to the document.
5. Lo and behold, it finds an event handler, which is executed, and the popups pops up.

Useful, isn't it? And totally logical, once you stop to think about it.

However, later in the project I removed the button bar onclick, too. All of a sudden the popup stopped appearing as soon as I clicked on the Yes button. That's logical, too, though it took me five anguished minutes to track down the source of this apparent bug.

1. Initially there's a button with an onclick event handler. The document doesn't have any.
2. The user clicks on the button and generates a click event.
3. As soon as the event enters the bubbling phase the onclick event handler of the button is executed. Among other things, it sets an onclick event handler on the document and removes the button from the document.
4. Now the event handler can't travel any further. The cause could be that the entire event object is destroyed. It could also be that the event just stops bubbling because the button has been taken out of the document tree and there's nothing to bubble up to.
5. In any case the document's onclick is not executed. The popup appears only on the user's next click.

The solution was simple: delay the removal of the button bar by 100 milliseconds (setTimeout). Now the event first bubbles up to the document and the popup is opened. Afterwards the bar can be safely removed.

All in a day's work.

Comments

Comments are closed.