SlideShare uma empresa Scribd logo
1 de 19
Baixar para ler offline
James Greene

http://jamesgreene.net/
“Bang, Bang”
     




   (Just kidding!)   2
The Problem
     
  I desire…



              3
WANTED!
                     
$("body").on("textSelect", function($event) {
    console.log("Text was selected!");
});




              DEAD OR ALIVE

                                            4
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
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
jQuery Event System
        
   Special Events API



                        7
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
Responsibilities
              
1. Allow hooks for “fixing” events

2. Allow for creation of custom events
     ready
     mouseenter
     mouseleave
     *
                                         9
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
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
Demo Time
       
Making the magic happen!



                           12
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
Demo #2: textSelect
           
 Usage:
    $(…).on("textSelect", function($event) {
         console.log("Text was selected!");
    });

 Demo page:
   Basic

 Code:
   http://github.com/JamesMGreene/jquery.textSelect/



                                                        14
Demo #3: swipe
            

throw new RangeError(
  "A demo does not exist at this index");




                                       15
Aftermath
    
Lessons Learned



                  16
Lessons Learned
            

               Surprise!
Textual selection event was added to IE9+.
Sort of….



                                             17
Lessons Learned
              
Special Events API is a dependency of
jQuery Mobile:
     tap
     scrollstart / scrollstop
     swipe / swipeleft / swiperight
     orientationchange
     throttledresize

                                        18
Questions?
   




   James Greene
http://jamesgreene.net/
                          19

Mais conteúdo relacionado

Mais procurados

Kick start with j query
Kick start with j queryKick start with j query
Kick start with j queryMd. Ziaul Haq
 
How kris-writes-symfony-apps-london
How kris-writes-symfony-apps-londonHow kris-writes-symfony-apps-london
How kris-writes-symfony-apps-londonKris Wallsmith
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony AppsKris Wallsmith
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitRebecca Murphey
 
PuppetCamp SEA 1 - Version Control with Puppet
PuppetCamp SEA 1 - Version Control with PuppetPuppetCamp SEA 1 - Version Control with Puppet
PuppetCamp SEA 1 - Version Control with PuppetWalter Heck
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery ApplicationsRebecca Murphey
 
No excuses, switch to kotlin
No excuses, switch to kotlinNo excuses, switch to kotlin
No excuses, switch to kotlinThijs Suijten
 
Nodejs do teste de unidade ao de integração
Nodejs  do teste de unidade ao de integraçãoNodejs  do teste de unidade ao de integração
Nodejs do teste de unidade ao de integraçãoVinícius Pretto da Silva
 
Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryRebecca Murphey
 
Getting classy with ES6
Getting classy with ES6Getting classy with ES6
Getting classy with ES6Andy Sharman
 
How to work with legacy code
How to work with legacy codeHow to work with legacy code
How to work with legacy codeMichał Kruczek
 
How to work with legacy code PHPers Rzeszow #2
How to work with legacy code PHPers Rzeszow #2How to work with legacy code PHPers Rzeszow #2
How to work with legacy code PHPers Rzeszow #2Michał Kruczek
 
An Introduction to Jquery
An Introduction to JqueryAn Introduction to Jquery
An Introduction to JqueryPhil Reither
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsJarod Ferguson
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureGarann Means
 

Mais procurados (20)

Kick start with j query
Kick start with j queryKick start with j query
Kick start with j query
 
How kris-writes-symfony-apps-london
How kris-writes-symfony-apps-londonHow kris-writes-symfony-apps-london
How kris-writes-symfony-apps-london
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development Toolkit
 
PuppetCamp SEA 1 - Version Control with Puppet
PuppetCamp SEA 1 - Version Control with PuppetPuppetCamp SEA 1 - Version Control with Puppet
PuppetCamp SEA 1 - Version Control with Puppet
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
No excuses, switch to kotlin
No excuses, switch to kotlinNo excuses, switch to kotlin
No excuses, switch to kotlin
 
Nodejs do teste de unidade ao de integração
Nodejs  do teste de unidade ao de integraçãoNodejs  do teste de unidade ao de integração
Nodejs do teste de unidade ao de integração
 
Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQuery
 
Getting classy with ES6
Getting classy with ES6Getting classy with ES6
Getting classy with ES6
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
How to work with legacy code
How to work with legacy codeHow to work with legacy code
How to work with legacy code
 
How to work with legacy code PHPers Rzeszow #2
How to work with legacy code PHPers Rzeszow #2How to work with legacy code PHPers Rzeszow #2
How to work with legacy code PHPers Rzeszow #2
 
An Introduction to Jquery
An Introduction to JqueryAn Introduction to Jquery
An Introduction to Jquery
 
Karan chanana
Karan chananaKaran chanana
Karan chanana
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
 
JavaScript patterns
JavaScript patternsJavaScript patterns
JavaScript patterns
 
Using Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer ArchitectureUsing Templates to Achieve Awesomer Architecture
Using Templates to Achieve Awesomer Architecture
 

Destaque

Oral presentation
Oral presentationOral presentation
Oral presentationygz4364
 
Parts of speech
Parts of speechParts of speech
Parts of speechDivzy
 
Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...
Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...
Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...Edward Brant DDS, MS
 
Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"
Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"
Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"Edward Brant DDS, MS
 
Long Island Implant Dentist presents "The Benefits of Dental Implants"
Long Island Implant Dentist presents "The Benefits of Dental Implants"Long Island Implant Dentist presents "The Benefits of Dental Implants"
Long Island Implant Dentist presents "The Benefits of Dental Implants"Edward Brant DDS, MS
 
Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...
Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...
Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...Edward Brant DDS, MS
 
23576671 presentation
23576671 presentation23576671 presentation
23576671 presentationtasteamit37
 
Long Island Periodontist presents "The Art and Science of the Painless Dental...
Long Island Periodontist presents "The Art and Science of the Painless Dental...Long Island Periodontist presents "The Art and Science of the Painless Dental...
Long Island Periodontist presents "The Art and Science of the Painless Dental...Edward Brant DDS, MS
 
Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...
Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...
Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...Edward Brant DDS, MS
 
Long Island Periodontist presents "Dental Implant Abutment Impression and Del...
Long Island Periodontist presents "Dental Implant Abutment Impression and Del...Long Island Periodontist presents "Dental Implant Abutment Impression and Del...
Long Island Periodontist presents "Dental Implant Abutment Impression and Del...Edward Brant DDS, MS
 
Faces of-wellness
Faces of-wellnessFaces of-wellness
Faces of-wellnessmedfit
 

Destaque (13)

FOTOGRAFIAS VELEROS REGATAS
FOTOGRAFIAS  VELEROS REGATASFOTOGRAFIAS  VELEROS REGATAS
FOTOGRAFIAS VELEROS REGATAS
 
Oral presentation
Oral presentationOral presentation
Oral presentation
 
Parts of speech
Parts of speechParts of speech
Parts of speech
 
Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...
Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...
Long Island Dental Implant Surgeon presents "Select Dental Implant Clinical D...
 
Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"
Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"
Long Island Periodontist presents "Appropriate Use of Antibiotics In Dentistry"
 
Long Island Implant Dentist presents "The Benefits of Dental Implants"
Long Island Implant Dentist presents "The Benefits of Dental Implants"Long Island Implant Dentist presents "The Benefits of Dental Implants"
Long Island Implant Dentist presents "The Benefits of Dental Implants"
 
Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...
Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...
Long Island Dental Implant Surgeon presents "Introduction To Computer Guieded...
 
23576671 presentation
23576671 presentation23576671 presentation
23576671 presentation
 
Long Island Periodontist presents "The Art and Science of the Painless Dental...
Long Island Periodontist presents "The Art and Science of the Painless Dental...Long Island Periodontist presents "The Art and Science of the Painless Dental...
Long Island Periodontist presents "The Art and Science of the Painless Dental...
 
Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...
Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...
Long Island Dental Specialist aka Periodontist uses Laser Periodontal Surgery...
 
Aap ridge split new orleans
Aap ridge split new orleansAap ridge split new orleans
Aap ridge split new orleans
 
Long Island Periodontist presents "Dental Implant Abutment Impression and Del...
Long Island Periodontist presents "Dental Implant Abutment Impression and Del...Long Island Periodontist presents "Dental Implant Abutment Impression and Del...
Long Island Periodontist presents "Dental Implant Abutment Impression and Del...
 
Faces of-wellness
Faces of-wellnessFaces of-wellness
Faces of-wellness
 

Semelhante a Leveraging jQuery's Special Events API (JSConf 2012)

jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Eventsdmethvin
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScriptAndrew Dupont
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryRemy Sharp
 
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQueryRemy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuerydeimos
 
Spin Up Desktop Apps with Electron.js
Spin Up Desktop Apps with Electron.jsSpin Up Desktop Apps with Electron.js
Spin Up Desktop Apps with Electron.jsSteve Godin
 
Scientific calcultor-Java
Scientific calcultor-JavaScientific calcultor-Java
Scientific calcultor-JavaShaibal Ahmed
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5arajivmordani
 
Jquery optimization-tips
Jquery optimization-tipsJquery optimization-tips
Jquery optimization-tipsanubavam-techkt
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoRobert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileRobert Nyman
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresRobert Nyman
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranRobert Nyman
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowRobert Nyman
 
Special Events: Beyond Custom Events
Special Events: Beyond Custom EventsSpecial Events: Beyond Custom Events
Special Events: Beyond Custom EventsBrandon Aaron
 
Firefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileFirefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileRobert Nyman
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformancejQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformanceJonas De Smet
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloRobert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresRobert Nyman
 

Semelhante a Leveraging jQuery's Special Events API (JSConf 2012) (20)

jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Events
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQueryRemy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
 
Spin Up Desktop Apps with Electron.js
Spin Up Desktop Apps with Electron.jsSpin Up Desktop Apps with Electron.js
Spin Up Desktop Apps with Electron.js
 
Scientific calcultor-Java
Scientific calcultor-JavaScientific calcultor-Java
Scientific calcultor-Java
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
Jquery optimization-tips
Jquery optimization-tipsJquery optimization-tips
Jquery optimization-tips
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, MontevideoJavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Montevideo
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, ChileJavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
 
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos AiresJavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
 
Special Events: Beyond Custom Events
Special Events: Beyond Custom EventsSpecial Events: Beyond Custom Events
Special Events: Beyond Custom Events
 
Firefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileFirefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobile
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformancejQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
 
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao PauloJavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 

Último

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Último (20)

201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

Leveraging jQuery's Special Events API (JSConf 2012)

  • 2. “Bang, Bang”  (Just kidding!) 2
  • 3. The Problem  I desire… 3
  • 4. WANTED!  $("body").on("textSelect", function($event) { console.log("Text was selected!"); }); DEAD OR ALIVE 4
  • 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. 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. jQuery Event System  Special Events API 7
  • 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. Responsibilities  1. Allow hooks for “fixing” events 2. Allow for creation of custom events  ready  mouseenter  mouseleave  * 9
  • 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. 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. Demo Time  Making the magic happen! 12
  • 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. 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. Demo #3: swipe  throw new RangeError( "A demo does not exist at this index"); 15
  • 16. Aftermath  Lessons Learned 16
  • 17. Lessons Learned  Surprise! Textual selection event was added to IE9+. Sort of…. 17
  • 18. Lessons Learned  Special Events API is a dependency of jQuery Mobile:  tap  scrollstart / scrollstop  swipe / swipeleft / swiperight  orientationchange  throttledresize 18
  • 19. Questions?  James Greene http://jamesgreene.net/ 19

Notas do Editor

  1. Hello! My name is James “Gunslinger” Greene and I’m going to be talking to you today about leveraging jQuery’s Special Events API to extend the event system with your own custom events.Oh, hey, quick side note: did you guys already hear the secret password for getting into the Red Revolver Lounge tonight?
  2. Just kidding! There is no secret password — at least not that anyone told me about. 
  3. So, let’s talk about the problem that led me to stumble upon jQuery’s Special Events API.
  4. What I wanted was a way for both myself and other JavaScript consumers to bind to synthetic events that don’t have to manually trigger. In particular, I was seeking an event that would fire on text selection. Alas, my initial searches yielded unfortunate results: even modern browsers don’t seem to support such an event.†  †More on this later. So, we have some alternative options....
  5. First, we could attach to the relevant corresponding DOM event (mouseup, in this case) with a callback that manually triggers a synthetic “textSelect” event when appropriate. This is bit cheesy, plus I really don’t want to have to hook up an event like this each time.
  6. Perhaps better: I could wrap this same basic code up as a simple jQuery plugin. However, I still think this ugly AND I was given recent direction from the jQuery Foundation discouraging jQuery plugin functions for event-related shortcuts.
  7. Let’s dive in and take a closer look at jQuery’s Special Events API.
  8. jQuery 1.3 introduced a rudimentary form of the Special Events API.jQuery 1.7 introduced a major overhaul to the long-neglected Special Events API. This revamped API is the true basis of my talk today.An important disclaimer, though: this API is still under review and therefore still subject to change. Proceed with caution!
  9. So what doesjQuery’s Special Events API do?The Special Events API has two main responsibilities: 1. Allow hooks for “fixing” events. This is primarily to standardize event behavior across browsers. 2. Allow for the creation of custom events defined by the browsers. This includes the ultra-famous “ready” event that we all know and love, as well as “mouseenter” and “mouseleave”… but it doesn’t have to stop there! This also allows developers to create their own custom bindable events that snap right into the jQuery Event System for a smooth, integrated feeling. This is where the rest of the talk will focus.
  10. The API for custom events has a number of properties and methods that can be set. In practice, however, most of them are optional or must be used in combinations. A quick rundown of each: - noBubble: Indicates whether or not this event type should be bubbled when the .trigger() method is called; defaults to false, which enables bubbling. - bindType and delegateType: Specify that a special event should be handled like another event type until the event is delivered; bindType if attached directly, delegateType for delegated events. - handle: The handle hook is basically a pre-condition checker. If the handle hook exists, jQuery calls it INSTEAD OF the attached event handler, passing it the event and any data passed from .trigger() if it was not a native event. Based in the information it has, the handle hook should decide whether to call the original handler function.
  11. The API for custom events has a number of properties and methods that can be set. In practice, however, most of them are optional or must be used in combinations. A quick rundown of each: - noBubble: Same as on the previous slide! - setup: Called the first time an event of a particular type is attached to an element. - teardown: Called when the final event of a particular type is removed from an element. - add: Called each time an event handler is added to an element. - remove: Called each time an event handler is removed from an element. - trigger: Called when the .trigger() or .triggerHandler() methods are used to trigger an event for the special type from code, as opposed to events that originate from within the browser. - _default: When the .trigger() method finishes running all the event handlers for an event, it also looks for and runs any method on the target object by the same name unless at least one of the handlers called event.preventDefault(). The _default hook is called just prior to checking for and executing the element's default method; sort of a last-chance event handler for jQuery.
  12. Alright, so enough background: let’s see what this API can do. Demo time!
  13. Note: This demo will show off Syntax #1.
  14. Note: This demo will show off Syntax #2.
  15. Whoops! As you can see,I didn’t have time to create the basic “swipe” demo that I had planned… but that’s OK. Another comment on that later.
  16. Alright, so I think this is a pretty handy API for allowing us to abstract creative custom events that we consider to be missing. But, I also want to share with you a few other things I learned in the process.
  17. Surprise! IE turns out to be the dark horse innovators for JavaScript once again, introducing an updated version of the “select” event that kind of supports this behavior. The issue with it? The deepest element reference you can get to it is the body element. Sadness.
  18. When I decided to start updating my “textSelect” event for mobile, I decided to look at jQuery Mobile’s source code to find out what test they do to detect support for touch events. In doing so, I found another missing link: jQuery Mobile is loaded with usage of the Special Events API. They use it to abstract out the many custom event types you see on this slide. Should’ve drawn this connection earlier, but all the same, it was nice to discover that the API receives more usage than I originally thought.
  19. Thanks for coming to my talk! Are there any questions?