Event Models• There are three event models: Bubble, Capture, and W3C.• Bubbling is the only one that currently works in all browsers.• Bubbling starts at the inner most element and travels up ancestor elements until it reaches an event listener. http://www.quirksmode.org/js/events_order.html
Notes for .bind()• Bind attaches events directly to each element that matches the selector.• Lower overhead when processing events.• Higher memory usage by attaching many events.• New DOM elements are not setup automatically and need to have .bind() applied each time one is added to the page.
Notes for .live()• live() always attaches events to the document.• Bubbling has to travel all the way up to the top of the document for every event.• Higher processing because live needs to check if the event matches the given selector.• Elements added to the DOM dynamically will still be handled by the .live() event handler.• Don’t use live().
Notes for .delegate()• A localized version of .live() events.• Events are attached to a containing element instead of the document.• Higher performance than live() due to the shorter path of the event Bubble.• Always use instead of .live() to avoid unnecessary bubbling overhead.
Notes for .on()• New in jQuery 1.7• Replacement for the 3 separate event APIs by providing a uniﬁed API for all event types.• .bind(), .live(), and .delegate will remain in jQuery for backwards compatibility• Internally .bind(), .live(), and .delegate now use the .on() API• Performance; Enhance, Enhance, Enhance.