This document discusses jQuery event handling methods. It describes the bubble event model and compares the .bind(), .live(), and .delegate() methods. .bind() attaches events directly to each matched element, but new elements need to be rebound. .live() attaches to the document, causing high overhead. .delegate() attaches to a containing parent, avoiding unnecessary bubbling. All three are replaced by the new .on() method, which provides a unified events API.

1. jQuery Events
by: Charlie Choiniere

2. 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

3. Bubbling Event Order
2nd
1st

4. .bind()
http://api.jquery.com/bind/

5. Usage:
$(‘.foo’).bind(‘click’, function({
console.log(“OH HAI!”);
});

6. click click click click click
.foo .foo .foo .foo .foo
click click click click click
.foo .foo .foo .foo .foo
click click click click click
.foo .foo .foo .foo .foo
click click click click click
.foo .foo .foo .foo .foo
click click click click click
.foo .foo .foo .foo .foo

7. 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.

8. .live()
http://api.jquery.com/live/

9. Usage:
$(‘.foo’).live(‘click’, function({
console.log(“OH HAI!”);
});

10. document
.foo .foo .foo .foo click
.foo .foo .foo .foo .foo
.foo .foo .foo .foo .foo
.foo .foo .foo .foo .foo
.foo .foo .foo .foo .foo

11. 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().

12. .delegate()
http://api.jquery.com/delegate/

13. Usage:
$(‘.container’)
.delegate(‘.foo’, ‘click’, function({
console.log(“OH HAI!”);
});

14. document
.container
.bar .bar .bar
click
.foo
.bar .bar .bar
.foo .foo
.bar .bar .bar
.foo .foo
.bar .bar .bar
.foo .foo
.bar .bar .bar
.foo .foo

15. 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.

16. $(‘.wax’).on();
$(‘.wax’).off();
http://api.jquery.com/on/
http://api.jquery.com/off/

17. Bind Replacement
Usage:
$(‘.foo’).on(‘click’, function({
console.log(“OH HAI!”);
});

18. Live Replacement
Usage:
$(document)
.on(‘click’, ‘.foo’, function({
console.log(“OH HAI!”);
});

19. Delegate Replacement
Usage:
$(‘.container’)
.on(‘click’, ‘.foo’, function({
console.log(“OH HAI!”);
});

20. Notes for .on()
• New in jQuery 1.7
• Replacement for the 3 separate event APIs by
providing a unified 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.