jQuery 1.7 Events

JQUERY 1.7 EVENTS

1.7 Event Goals: Simplify the API

1.7 Event Goals: Make It Faster!

1.7 Event Goals: Reduce Overall Size

1.7 Event Goals: Fix Existing Bugs

1.7 Event Goals: Don’t Break It

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

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

Yes: bind, live, delegate work in 1.7!

No need to panic

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

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)

No Pressure, But …

Defeat Selector-Match Bottlenecks!

Test Case Profile in 1.6.3: 15.1 secs

Test Case Profile in 1.7: 5.6 secs

Therefore …

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]

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)

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)

Event Hook Enhancements

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

Internet Explorer Can’t Be Forgotten

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

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

In Summary …

It Passes Unit Tests, But …

We Need Your Help Testing

It Do All Things! What You Think?
Google+, email: dave.methvin@gmail.com
Twitter: @davemethvin
Github: dmethvin

And now … OM NOM NOM!

http://paper.li	210
http://a0.twimg.com	28
http://a0.twimg.com	28
http://us-w1.rockmelt.com	17

jQuery 1.7 Events

by dmethvin on Oct 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 283

Statistics

jQuery 1.7 Events — Presentation Transcript