jQuery 1.7 Events


Published on

Published in: Technology, Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery 1.7 Events

  1. 1. JQUERY 1.7 EVENTS
  2. 2. 1.7 Event Goals: Simplify the API
  3. 3. 1.7 Event Goals: Make It Faster!
  4. 4. 1.7 Event Goals: Reduce Overall Size
  5. 5. 1.7 Event Goals: Fix Existing Bugs
  6. 6. 1.7 Event Goals: Don’t Break It
  7. 7.
  8. 8. .on() and .off() <ul><li>Unifies bound and delegated events </li></ul><ul><ul><li>$().on(events, “selector”, data, handler); </li></ul></ul><ul><ul><li>$().off(events, “selector”, handler); </li></ul></ul><ul><li>Maps straightforwardly to old APIs: </li></ul><ul><ul><li>$(“a”).bind(“click change”, { mydata: 42 }, fn); </li></ul></ul><ul><ul><li>$(“a”).on(“click change”, { mydata: 42 }, fn); </li></ul></ul><ul><ul><li>$(“.box”).delegate(“a”, “click.myplugin”, fn); </li></ul></ul><ul><ul><li>$(“.box”).on(“click.myplugin”, “a”, fn); </li></ul></ul><ul><ul><li>$(“a”).live(“click”, fn); </li></ul></ul><ul><ul><li>$(document).on(“click”, “a”, fn); </li></ul></ul>
  9. 9. Benefits <ul><li>Ends confusion about interaction across event APIs </li></ul><ul><ul><li>$( “a” ). live ( “click” , function(){ alert( “Hello” ); }); </li></ul></ul><ul><ul><li>$(document). unbind ( “click” ); // live is now dead! </li></ul></ul><ul><ul><li>$(document). on ( “click” , “a” , function(){ alert( “Hello” ); }); </li></ul></ul><ul><ul><li>$(document). off ( “click” ); </li></ul></ul><ul><li>Consistent pronunciation (unlike live/die ) </li></ul><ul><li>Chainable with traversal/filter methods (unlike live ) </li></ul><ul><li>Argument order is consistent (unlike delegate ) </li></ul><ul><li>Shorter to type ( off vs. undelegate ) </li></ul><ul><li>No confusion with ES5 Function.bind </li></ul><ul><li>Saved 1,122 bytes removing bind/live/delegate in 1.7 </li></ul>
  10. 10.
  11. 11. Yes: bind, live, delegate work in 1.7!
  12. 12. No need to panic
  13. 13. Event Delegation is Great, But … <ul><li>W3C sez: Determine handlers before delivery </li></ul><ul><ul><li>A handler can’t change which subsequent handlers are called, other than .stopPropagation() and .stopImmediatePropagation() </li></ul></ul><ul><li>jQuery must selector-match up to the delegation point </li></ul><ul><li>Protip: D elegate to the nearest possible element </li></ul>
  14. 14. Don’t Make Me Bubble, Bro! <ul><li>(document) $(“.submenu-item”).live(“click”, myFn ) </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><body class=“js”> </li></ul></ul><ul><ul><li><div id=“wrapper”> </li></ul></ul><ul><ul><li><ul id=“nav”> $(“#nav”).on(“click”, “.submenu-item”, myFn ) </li></ul></ul><ul><ul><li><li class=“flyout”> Text size </li></ul></ul><ul><ul><li><ul class=“submenu”> </li></ul></ul><ul><ul><li><li class=“submenu-item”>Medium</li> </li></ul></ul><ul><li>Browser bubbles to the delegation point, calls the jQuery handler </li></ul><ul><li>jQuery selector-matches, again bubbling to the delegation point </li></ul><ul><li>jQuery runs the user’s handler(s) (in this case, myFn) </li></ul>
  15. 15. No Pressure, But …
  16. 16. Defeat Selector-Match Bottlenecks!
  17. 17. Test Case Profile in 1.6.3: 15.1 secs
  18. 18. Test Case Profile in 1.7: 5.6 secs
  19. 19. Therefore …
  20. 20. JavaScript is Slower than C … <ul><li>… but we can be smarter than matchesSelector! </li></ul><ul><li>Reprise John Resig’s “The Selectors People Actually Use” </li></ul><ul><li>From Google Codesearch, for .live() and .delegate() </li></ul><ul><ul><li>33% .class </li></ul></ul><ul><ul><li>12% tag.class </li></ul></ul><ul><ul><li>11% #id </li></ul></ul><ul><ul><li>4% tag </li></ul></ul><ul><ul><li>4% tag[attr=value] </li></ul></ul><ul><ul><li>68% match tag#id.class[attr=value] </li></ul></ul>
  21. 21. A Plan Materializes: quickIs() <ul><li>Attempt to pre-parse the selector during event attach </li></ul><ul><li>If it matches the subset, save the parsed components </li></ul><ul><li>At event delivery, selector check is just one statement </li></ul><ul><li>Complex selectors work, they just take the Sizzle path </li></ul><ul><li>(Show the codez) </li></ul>
  22. 22.
  23. 23. How Fast Is It Now? Delegated event delivery time (milliseconds): Let us not speak of event overhead again. Browser jQuery 1.6.3 jQuery 1.7 Beta Chrome 13 3.0 1.1 (2.8x) Firefox 6 4.0 1.5 (2.7x) IE 7 55.6 13.1 (4.2x) IE 9 9.6 2.3 (4.1x) IE10 PP 8.2 2.1 (3.9x)
  24. 24. Event Hook Enhancements
  25. 25. Make Events More Hookable <ul><li>Existing code had some hard-wired special cases: </li></ul><ul><ul><li>mouseenter/mouseleave on delegated events </li></ul></ul><ul><ul><li>Delegated events put under a “live” event – not DRY </li></ul></ul><ul><li>New special event hooks simplified code: </li></ul><ul><ul><li>trigger hook called from jQuery.event.trigger() </li></ul></ul><ul><ul><li>handle hook called from jQuery.event.handle() </li></ul></ul><ul><li>New event property hooks (propHooks) </li></ul><ul><ul><li>Fixes up event object when a native event occurs </li></ul></ul><ul><ul><li>Allows code to run only for specific events </li></ul></ul><ul><ul><li>Copies only relevant event properties </li></ul></ul><ul><ul><li>Example: Normalize event.pageX/pageY for mouse events </li></ul></ul>
  26. 26. Internet Explorer Can’t Be Forgotten
  27. 27. Change/Submit for IE 6, 7, 8 <ul><li>A must-have for useful event delegation </li></ul><ul><li>jQuery special event hooks for old IE, since 1.4 </li></ul><ul><ul><li>Fake bubbling submit event by listening for click/keypress </li></ul></ul><ul><ul><li>Fake bubbling change event by listening for lots o’ stuff </li></ul></ul><ul><li>Unfortunately, fake isn’t always good enough </li></ul><ul><ul><li>Events don’t fire in expected order </li></ul></ul><ul><ul><li>Complex special cases that require lots of code to fix </li></ul></ul><ul><li>Heroic failed effort, so let’s try Plan B: </li></ul><ul><ul><li>Listen for the earliest possible event on an element </li></ul></ul><ul><ul><li>Attach a real submit/change event and bubble it manually </li></ul></ul><ul><ul><li>jQuery cleanup takes care of removing the event </li></ul></ul>
  28. 28. Event Bugs Fixed in 1.7 <ul><li>Many fixed in the course of overall code restructure </li></ul><ul><li>Oldest bug was from February 2010 </li></ul>Open Bugs Open Feature Requests jQuery 1.6.4 28 4 jQuery 1.7 beta 3 1
  29. 29. In Summary …
  30. 30. It Passes Unit Tests, But …
  31. 31. We Need Your Help Testing
  32. 32. It Do All Things! What You Think? <ul><li>Google+, email: dave.methvin@gmail.com </li></ul><ul><li>Twitter: @davemethvin </li></ul><ul><li>Github: dmethvin </li></ul>
  33. 33. And now … OM NOM NOM!