YUI Bubbling Library: a seriously cool design pattern

Brian Dillard, Wednesday, September 19, 2007 @ 5:15 am

Caridy Patino recently posted to the YUI Blog about his event-bubbling library, which uses the subscriber/publisher design pattern to abstract an entire webapp's event binding into its own unobtrusive behavioral layer. Instead of attaching events to individual DOM nodes using addListener, you intercept and process all events near the document root, then use CSS classes or other criteria to match up individual events with the correct handlers. In effect, you end up with a big, global switch statement for handling mouse clicks, mouseovers, keydowns and other events.

Patino, a respected contributor to the YUI mailing list, makes a strong case for the usefulness of his library on larger, more event-driven webapps. For one thing, it can reduce the overhead of handling IE memory leaks. For another, it can simplify the process of attaching custom JavaScript behaviors to dynamically loaded content. Best of all, it can be used to improve performance of really complex apps.

Of course, such an abstract approach isn't for every developer or every application. Patino is pretty frank about both the pros and cons of his approach for specific situations. Even if the actual technique isn't for you, though, the post is a fantastic primer on the intricacies of DOM events and the publisher/subscriber pattern.

• Read the post
• Check out the library

Related posts:

1. DOM methods, document.write and the art of library design
2. A Useful Resource: Ajax Pattern Wiki
3. Design Pattern 1 – faded breadcrumbs
4. Design Pattern 7: Required fields
5. Design Pattern 4 – Inline help

Comments (2)

Software Development

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   The Bubbling Library is absolutely awesome.

   Now, everyone that uses Behaviour/EventSelector with Prototype/Scriptaculous can’t say, “YUI sucks because you end up writing too much code for each DOM element”.

   Kudos to Caridy.

   By the way, event-driven application development like this using css selectors isn’t faster. It always has to keep crawling the DOM–but what if you update the DOM dynamically/periodically? You’ll need to keep crawling the DOM again and re-attach the listeners. Yes, you write less lines of code–but you end up crawling the DOM too much–which gets CPU intensive (IE6 cries like a baby when crawling, Safari, Firefox, Opera and IE7 can crawl nicely).

   Comment by MezZzeR, Sunday, September 30, 2007 @ 3:03 am

2. 

   YUI sucks because i can’t get tables to sort , the documentation is unreadable. Apart from being completely useless it’s pretty nice

   Comment by francine, Monday, June 9, 2008 @ 4:18 am

Leave a comment