James Greenehttp://jamesgreene.net/
“Bang, Bang”        (Just kidding!)   2
The Problem       I desire…              3
WANTED!                     $("body").on("textSelect", function($event) {    console.log("Text was selected!");});       ...
Cheesy!                  $("body").on("textSelect", function($event) {    console.log("Text was selected!");});$("body")....
Better…?                  $.fn.onTextSelect = function(callback) {  this.on("mouseup", function($event) {    if (window.g...
jQuery Event System           Special Events API                        7
Brief History                  jQuery 1.3:   Special Events API   …but no official documentation jQuery 1.7:   Major...
Responsibilities              1. Allow hooks for “fixing” events2. Allow for creation of custom events     ready     mo...
Custom Event: Syntax #1          $.event.special.MyEvent = {     noBubble: false,     bindType: "otherEventType",     del...
Custom Event: Syntax #2          $.event.special.MyEvent = {    noBubble: false,    setup: function(data, namespaces, han...
Demo Time       Making the magic happen!                           12
Demo #1: multiclick            Usage:    $(…).on("multiclick", { clicks: 3 },         function($event) {             con...
Demo #2: textSelect            Usage:    $(…).on("textSelect", function($event) {         console.log("Text was selected...
Demo #3: swipe            throw new RangeError(  "A demo does not exist at this index");                                 ...
Aftermath    Lessons Learned                  16
Lessons Learned                           Surprise!Textual selection event was added to IE9+.Sort of….                   ...
Lessons Learned              Special Events API is a dependency ofjQuery Mobile:     tap     scrollstart / scrollstop  ...
Questions?      James Greenehttp://jamesgreene.net/                          19
Upcoming SlideShare
Loading in …5
×

Leveraging jQuery's Special Events API (JSConf 2012)

1,661 views

Published on

The jQuery JavaScript library has become a household item in the web development community. It allows for simple event binding, DOM manipulation, and asynchronous requests. Many developers know they can extend jQuery using their simple plugin development process ... but did you also know that jQuery is extensible in other ways as well? We will focus on extending jQuery's event system via the Special Events API in order to create our own custom bindable events, such as "multiclick", "textSelect", and "swipe".

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Leveraging jQuery's Special Events API (JSConf 2012)

  1. 1. James Greenehttp://jamesgreene.net/
  2. 2. “Bang, Bang”  (Just kidding!) 2
  3. 3. The Problem  I desire… 3
  4. 4. WANTED! $("body").on("textSelect", function($event) { console.log("Text was selected!");}); DEAD OR ALIVE 4
  5. 5. Cheesy! $("body").on("textSelect", function($event) { console.log("Text was selected!");});$("body").on("mouseup", function($event) { if (window.getSelection().rangeCount > 0) { $("body").trigger("textSelect"); }} 5
  6. 6. Better…? $.fn.onTextSelect = function(callback) { this.on("mouseup", function($event) { if (window.getSelection().rangeCount > 0) { callback($event); } }}$("body").onTextSelect(function($event) { console.log("Text was selected!");}); 6
  7. 7. jQuery Event System  Special Events API 7
  8. 8. Brief History  jQuery 1.3:  Special Events API  …but no official documentation jQuery 1.7:  Major overhaul to Special Events API  …but still no official documentation Official documentation? Now in progress…. 8
  9. 9. Responsibilities 1. Allow hooks for “fixing” events2. Allow for creation of custom events  ready  mouseenter  mouseleave  * 9
  10. 10. Custom Event: Syntax #1  $.event.special.MyEvent = { noBubble: false, bindType: "otherEventType", delegateType: "otherEventType", handle: function($event, data) { … }, };NOTE: Almost all of these are optional to set (in varying combinations). 10
  11. 11. Custom Event: Syntax #2 $.event.special.MyEvent = { noBubble: false, setup: function(data, namespaces, handler) { … }, teardown: function() { … }, add: function(handleObj) { … }, remove: function(handleObj) { … }, trigger: function($event, data) { … }, _default: function($event, data) { … }};NOTE: Almost all of these are optional to set (in varying combinations). 11
  12. 12. Demo Time Making the magic happen! 12
  13. 13. Demo #1: multiclick  Usage: $(…).on("multiclick", { clicks: 3 }, function($event) { console.log("Thrice!"); } ); Demo pages:  Basic  Nested elements Code:  http://github.com/JamesMGreene/jquery.multiclick/ 13
  14. 14. Demo #2: textSelect  Usage: $(…).on("textSelect", function($event) { console.log("Text was selected!"); }); Demo page:  Basic Code:  http://github.com/JamesMGreene/jquery.textSelect/ 14
  15. 15. Demo #3: swipe throw new RangeError( "A demo does not exist at this index"); 15
  16. 16. Aftermath Lessons Learned 16
  17. 17. Lessons Learned  Surprise!Textual selection event was added to IE9+.Sort of…. 17
  18. 18. Lessons Learned Special Events API is a dependency ofjQuery Mobile:  tap  scrollstart / scrollstop  swipe / swipeleft / swiperight  orientationchange  throttledresize 18
  19. 19. Questions?  James Greenehttp://jamesgreene.net/ 19

×