jQuery 1.7 Events
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery 1.7 Events

on

  • 8,991 views

 

Statistics

Views

Total Views
8,991
Views on SlideShare
8,629
Embed Views
362

Actions

Likes
8
Downloads
59
Comments
3

7 Embeds 362

http://paper.li 210
http://www.ronchalant.com 76
http://a0.twimg.com 28
http://a0.twimg.com 28
http://us-w1.rockmelt.com 17
https://twitter.com 2
http://blog.ronchalant.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery 1.7 Events Presentation Transcript

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