jquery 1.7 events
DESCRIPTION
TRANSCRIPT
![Page 1: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/1.jpg)
JQUERY 1.7 EVENTS
1
![Page 2: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/2.jpg)
1.7 Event Goals: Simplify the API
2
![Page 3: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/3.jpg)
1.7 Event Goals: Make It Faster!
3
![Page 4: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/4.jpg)
1.7 Event Goals: Reduce Overall Size
4
![Page 5: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/5.jpg)
1.7 Event Goals: Fix Existing Bugs
5
![Page 6: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/6.jpg)
1.7 Event Goals: Don’t Break It
6
![Page 7: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/7.jpg)
7
![Page 8: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/8.jpg)
.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);
8
![Page 9: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/9.jpg)
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
9
![Page 10: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/10.jpg)
10
![Page 11: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/11.jpg)
Yes: bind, live, delegate work in 1.7!
11
![Page 12: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/12.jpg)
No need to panic
12
![Page 13: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/13.jpg)
Event Delegation is Great, But …• W3C sez: Determine handlers before deliveryA handler can’t change which
subsequent handlers are called, other than .stopPropagation() and .stopImmediatePropagation()
• jQuery must selector-match up to the delegation point
• Protip: Delegate to the nearest possible element
13
![Page 14: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/14.jpg)
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>
1)Browser bubbles to the delegation point, calls the jQuery handler
2)jQuery selector-matches, again bubbling to the delegation point
3)jQuery runs the user’s handler(s) (in this case, myFn)
14
![Page 15: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/15.jpg)
No Pressure, But …
15
![Page 16: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/16.jpg)
Defeat Selector-Match Bottlenecks!
16
![Page 17: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/17.jpg)
Test Case Profile in 1.6.3: 15.1 secs
17
![Page 18: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/18.jpg)
Test Case Profile in 1.7: 5.6 secs
18
![Page 19: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/19.jpg)
Therefore …
19
![Page 20: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/20.jpg)
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% .class12% tag.class11% #id 4% tag 4% tag[attr=value]
68% match tag#id.class[attr=value]
20
![Page 21: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/21.jpg)
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)
21
![Page 22: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/22.jpg)
22
![Page 23: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/23.jpg)
How Fast Is It Now?
23
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)
![Page 24: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/24.jpg)
Event Hook Enhancements
24
![Page 25: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/25.jpg)
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
25
![Page 26: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/26.jpg)
Internet Explorer Can’t Be Forgotten
26
![Page 27: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/27.jpg)
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
27
![Page 28: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/28.jpg)
Event Bugs Fixed in 1.7
Open BugsOpen Feature
Requests
jQuery 1.6.4 28 4
jQuery 1.7 beta 3 1
28
• Many fixed in the course of overall code restructure• Oldest bug was from February 2010
![Page 29: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/29.jpg)
29
In Summary …
![Page 30: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/30.jpg)
It Passes Unit Tests, But …
30
![Page 31: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/31.jpg)
We Need Your Help Testing
31
![Page 32: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/32.jpg)
It Do All Things! What You Think?• Google+, email: [email protected]• Twitter: @davemethvin• Github: dmethvin
32
![Page 33: jQuery 1.7 Events](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c2df4b4a7959ec238b461f/html5/thumbnails/33.jpg)
And now … OM NOM NOM!
33