The first thing you need to do before trying to use this utility, is to read this article in the Yahoo! User Interface Blog "The Bubbling Technique & Custom Event, YUI's Secret Weapon", to learn the principles of this pattern.

The Bubbling CORE Object require the inclusion of the YUI scripts: yahoo, dom, event or utilities. Once the necessary scripts are included in the pages, and the inclusion of the bubbling.js script, all the default behaviors layers (navigate, property, key, repaint, rollover and rollout) will be initialized automatically, using the default configuration, which means that you can subscribe behaviors immediately after the inclusion of the bubbling core. Each behaviors layer have an Custon Event, which means that you can add as many listeners as you need, see the list below:

• navigate
  This layer will catch the click, and action over links.
• property
  This layer will catch the right click, and control click in mac and opera.
• key
  This layer will catch the keyboard events.
• repaint
  This special layer will catch the resize window, font resize, and scrolling events. (the last two events require extra initialization, see the documentation)
• rollover
  This layer will catch the mouse movement, and will be fired on mouseover.
• rollout
  This layer will catch the mouse movement, and will be fired on mouseout.

The bubbling core is the keystone for building a Rich Internet Application, and will allow you to cut the big application down into manageable chunks and components and you can plan the detailed usability, information architecture and accessibility for each component separately. This allows you to develop in parallel with the design or information architecture team and results in reusable components for other applications.

Continue reading about the Bubbling Core…