jQuery Events


Published on

An explanation of the different event methods provided by jQuery.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

jQuery Events

  1. 1. jQuery Events by: Charlie Choiniere
  2. 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. 3. Bubbling Event Order 2nd 1st
  4. 4. .bind()http://api.jquery.com/bind/
  5. 5. Usage:$(‘.foo’).bind(‘click’, function({ console.log(“OH HAI!”);});
  6. 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. 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. 8. .live()http://api.jquery.com/live/
  9. 9. Usage:$(‘.foo’).live(‘click’, function({ console.log(“OH HAI!”);});
  10. 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. 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. 12. .delegate()http://api.jquery.com/delegate/
  13. 13. Usage:$(‘.container’) .delegate(‘.foo’, ‘click’, function({ console.log(“OH HAI!”); });
  14. 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. 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. 16. $(‘.wax’).on();$(‘.wax’).off(); http://api.jquery.com/on/ http://api.jquery.com/off/
  17. 17. Bind Replacement Usage:$(‘.foo’).on(‘click’, function({ console.log(“OH HAI!”);});
  18. 18. Live Replacement Usage:$(document) .on(‘click’, ‘.foo’, function({ console.log(“OH HAI!”); });
  19. 19. Delegate Replacement Usage:$(‘.container’) .on(‘click’, ‘.foo’, function({ console.log(“OH HAI!”); });
  20. 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.