SlideShare una empresa de Scribd logo
1 de 38
Descargar para leer sin conexión
#4




jQuery:
Events are where it happens!
            Doc. v. 0.1 - 17/03/09




                       Wildan Maulana | wildan [at] tobethink.com
What this presentation Covers

• The event models as implemented by
  the browsers
• Using jQuery to bind event handlers
  to elements
• The Event object instance
• Triggering event handlers under script
  control
The GUI Rule
1.Set up the user interface
2.Wait for something interesting to
  happen
3.React accordingly
4.Repeat
Understanding the browser event model
The DOM Level 0 Event Model
                              <html>
                               <head>
                                <title>DOM Level 0 Events Example</title>
                                <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;>
Ready handlers defines
                                </script>
mouseover handlers
                                <script type=quot;text/javascriptquot;>
                                 $(function(){
                                   $('#vstar')[0].onmouseover = function(event) {
                                     say('Whee!');
Utility function emits text
                                   }
to console
                                 });

                                 function say(text) {
                                   $('#console').append('<div>'+new Date()+' '+text+'</div>');
                                 }
<div> element serve as
                                </script>
console                                                       <img> element is instrumented
                               </head>

                               <body>
                                <img id=quot;vstarquot; src=quot;vstar.jpgquot; onclick=quot;say('Vroom vroom!')quot;/>
                                <div id=quot;consolequot;></div>
                               </body>
                              </html>
Event Handler
onclick=quot;say('Vroom vroom!');quot;



                 an anonymous function is automatically created
                               using the value
                   of the attribute as the function body




             imageElement.onclick = function(event) {
               say('Vroom vroom!');
             }
The DOM Level 0 Event Model In Action
The Event instance
Event Bubbling
• What is Event Bubbling ?
Event Bubbling in Action           <html id=quot;greatgreatgrandpaquot;>
                                        <head>
                                         <title>DOM Level 0 Bubbling Example</title>
                                         <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;>
     Events propagating
•                                        </script>
     from the point of origin to the     <script type=quot;text/javascriptquot;>
                                          $(function(){
     top of the
                                            $('*').each(function(){
     DOM tree                                 var current = this;
                                              this.onclick = function(event) {
                                                if (!event) event = window.event;
                                                var target = (event.target) ?
                                                           event.target : event.srcElement;
                                                say('For ' + current.tagName + '#'+ current.id +
                                                    ' target is ' + target.id);
                                              }
                                            });
                                          });

                                          function say(text) {
                                            $('#console').append('<div>'+text+'</div>');
                                          }
                                         </script>
                                        </head>

                                        <body id=quot;greatgrandpaquot;>
                                         <div id=quot;grandpaquot;>
                                           <div id=quot;popsquot;>
                                            <img id=quot;vstarquot; src=quot;vstar.jpgquot;/>
                                           </div>
                                         </div>
                                         <div id=quot;consolequot;></div>
                                        </body>
                                       </html>
Affecting event propagation
• If we want to prevent an event from
  propagating, we can use :
  – stopPropagation() method of the Event
    instance (for standard compliant
    browser) or
  – In internet explore, we set a property
    named cancelBubble to true in the
    Event instance
Lack of DOM Level 0
• One severe shortcoming of the DOM Level 0 Event Model is
  that, because a property is used to store a reference to a
  function that’s to serve as an event handler,only one event
  handler per element can be registered for any specific event
  type

   someElement.onclick = doFirstThing;
   someElement.onclick = doSecondThing;
                                                           Won't work !


    • Using Observable pattern that establishes
                                                   The solution
    a publish/subscribe schema for that handlers
    • Or using closure Or …
    • Using DOM Level 2 Event Model
The DOM Level 2 Event Model
Establishing events
• Rather than assigning a function reference to an
  element property, DOM Level 2 event handlers—
  also termed listeners—are established via an
  element method.
• Each DOM element defines a method named
  addEventListener() that’s used to attach event
  handlers (listeners) to the element


addEventListener(eventType,listener,useCapture)
addEventListener()

  addEventListener(eventType,listener,useCapture)



EventType is a string that identifies the type
of event to be handled
                                                            useCapture, is a Boolean



              The listener parameter is a reference
              to the function (or inline function) that’s to be
              established as the handler for the named
              event type on the element
Establishing event handlers with the DOM Level 2 Model
                                         <html>
                                          <head>
                                           <title>DOM Level 2 Events Example</title>
                                           <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;>
                                           </script>
                                           <script type=quot;text/javascriptquot;>
                                            $(function(){
                                              var element = $('#vstar')[0];
                                              element.addEventListener('click',function(event) {
                                                say('Whee once!');
                                              },false);
                                              element.addEventListener('click',function(event) {
                                                say('Whee twice!');
                                              },false);
                                              element.addEventListener('click',function(event) {
                                                say('Whee three times!');
                                              },false);
                                            });

                                             function say(text) {
                                               $('#console').append('<div>'+text+'</div>');
                                             }
                                           </script>
                                          </head>
                                          <body>
                                           <img id=quot;vstarquot; src=quot;vstar.jpgquot;/>
Remember : The Order of the execution      <div id=quot;consolequot;></div>
is not guaranteed ! It can be random !    </body>
                                         </html>
Event Propagation




Propagation in the DOM Level 2 Event Model traverses the DOM
hierarchy twice: once from top to target during capture phase and
once from target to top during bubble phase.
<html id=quot;greatgreatgrandpaquot;>
   Tracking event propagation       <head>
with bubble and capture handlers     <title>DOM Level 2 Propagation Example</title>
                                     <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;>
                                     </script>
                                     <script type=quot;text/javascriptquot;>
                                      $(function(){
                                        $('*').each(function(){
                                          var current = this;
                                          this.addEventListener('click',function(event) {
                                            say('Capture for ' + current.tagName + '#'+ current.id +
                                                ' target is ' + event.target.id);
                                            },true);
                                          this.addEventListener('click',function(event) {
                                            say('Bubble for ' + current.tagName + '#'+ current.id +
                                                ' target is ' + event.target.id);
                                            },false);
                                        });
                                      });

                                      function say(text) {
                                        $('#console').append('<div>'+text+'</div>');
                                      }
                                     </script>
                                    </head>

                                    <body id=quot;greatgrandpaquot;>
                                     <div id=quot;grandpaquot;>
                                       <div id=quot;popsquot;>
                                        <img id=quot;vstarquot; src=quot;vstar.jpgquot;/>
                                       </div>
                                     </div>
                                     <div id=quot;consolequot;></div>
                                    </body>
                                   </html>
The Internet Explore Event Model

• Internet Explorer (both IE6 and, most
  disappointingly, IE7) doesn’t provide
  support for the DOM Level 2 Event


       addEventListener() → attachEvent(eventName,handler)
The jQuery Event Model
                        jQuery event implementation



    jQuery event implementation, exhibits the following features :
•
    – Provides a unified method for establishing event handlers
        Allows multiple handlers for each event type on each element
    –
    – Uses standard event-type names: for example, click or
      mouseover
    – Makes the Event instance available as a parameter to the
      handlers
    – Normalizes the Event instance for the most often used
      properties
    – Provides unified methods for event canceling and default action
      blocking
Binding event handlers using jQuery


• Using the jQuery Event Model, we can establish
  event handlers on DOM elements with the bind()
  command :

  $('img').bind('click',function(event){alert('Hi 
  there!');});
Command syntax : bind
bind(eventType,data,listener)

Establishes a function as the event handler for the specified event type on all elements in the
matched set.
Parameters
                                                 (String) Specifies the name of the event type
eventType
                                                 for which the handler is to be established.
                                                 This event type can be namespaced with a
                                                 suffix separated
                                                 from the event name with a period character.
                                                 See the remainder of this
                                                 section for details.
                                                 (Object) Caller-supplied data that’s attached
data
                                                 to the Event instance as a
                                                 property named data for availability to the
                                                 handler functions. If omitted, the
                                                 handler function can be specified as the
                                                 second parameter.
                                                 (Function) The function that’s to be
listener
                                                 established as the event handler.
Returns
The wrapped set
<html>
bind() in action    <head>
                     <title>jQuery Events Example</title>
                     <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;>
                     </script>
                     <script type=quot;text/javascriptquot;>
                      $(function(){
                        $('#vstar')
                          .bind('click',function(event) {
                            say('Whee once!');
                          })
                          .bind('click',function(event) {
                            say('Whee twice!');
                          })
                          .bind('click',function(event) {
                            say('Whee three times!');
                          });
                      });

                      function say(text) {
                        $('#console').append('<div>'+text+'</div>');
                      }
                     </script>
                    </head>

                    <body>
                     <img id=quot;vstarquot; src=quot;vstar.jpgquot;/>
                     <div id=quot;consolequot;></div>
                    </body>
                   </html>
Also works on IE ...
Command syntax : specific event binding
eventTypeName(listener)

Establishes the specified function as the event handler for the event type
named by the method’s name. The supported commands are as follows:
  blur                focus               mousedown            resize
●                   ●                   ●                    ●

● change            ● keydown           ● mousemove          ● scroll

● click             ● keypress          ● mouseout           ● select

● dblclick          ● keyup             ● mouseover          ● submit

● error             ● load              ● mouseup            ● unload


Note that when using these shortcut methods, we cannot specify a data value
to be placed in the event.data property.
Parameters
                    (Function) The function that’s to be established as the
listener
                    event handler.
Returns
The wrapped set.
Command syntax: one
one(eventType,data,listener)

Establishes a function as the event handler for the specified event type on all
elements in the matched set. Once executed, the handler is automatically
removed.
Parameters
eventType                 (String) Specifies the name of the event type for which
                          the handler is to be established.
data                      (Object) Caller-supplied data that’s attached to the
                          Event instance for availability to the handler functions.
                          If omitted, the handler function can be specified as the
                          second parameter.
listener                  (Function) The function that’s to be established as the
                          event handle
Returns
The wrapped set.
Removing event handlers
                          Command syntax: unbind
unbind(eventType,listener)
unbind(event)

Removes events handlers from all elements of the wrapped set as specified by
the optional passed parameters. If no parameters are provided, all listeners are
removed from the elements.
Parameters
eventType                 (String) If provided, specifies that only listeners
                          established for the specified event type are to be
                          removed.
listener                   (Function) If provided, identifies the specific listener
                          that’s to be remove
event                     (Event) Removes the listener that triggered the event
                          described by this Event instance.
Returns
The wrapped set.
Inspecting the Event instance
          Property                      Description
                     Set to true if the Alt key was pressed when the
altKey
                     event was triggered, false if not. The Alt key is
                     labeled Option on most Mac keyboards.
                     Set to true if the Ctrl key was pressed when the
ctrlKey
                     event was triggered, false if not.
                     The value, if any, passed as the second
data
                     parameter to the bind() command when the
                     handler was established.
                     For keyup and keydown events, this returns the
keyCode
                     key that was pressed. Note that for alphabetic
                     characters, the uppercase version of the letter will
                     be returned, regardless of whether the user typed
                     an uppercase or lowercase letter. For example,
                     both a and A will return 65. You can use
                     shiftKey to determine which case was entered.
                     For keypress events, use the which property,
                     which is reliable across browsers.
Inspecting the Event instance
metaKey                   Set to true if the Meta key was pressed
                         when the event was triggered, false if
                         not.The Meta key is the Ctrl key on PCs
                         and the Command key on Macs.
pageX                    For mouse events, specifies the
                         horizontal coordinate of the event
                         relative from the page origin.
pageY                    For mouse events, specifies the vertical
                         coordinate of the event relative from the
                         page origin.
relatedTarget            For some mouse events, identifies the
                         element that the cursor left or entered
                         when the event was triggered.
screenX                  For mouse events, specifies the
                         horizontal coordinate of the event
                         relative from the screen origin.
screenY                   For mouse events, specifies the
                         vertical coordinate of the event relative
                         from the screen origin.
Inspecting the Event instance
                         Set to true if the Shift key was pressed
shiftKey
                         when the event was triggered, false if
                         not.
target                   Identifies the element for which the
                         event was triggered.
type                     For all events, specifies the type of
                         event that was triggered (for example,
                         click). This can be useful if you’re using
                         one event handler function for multiple
                         events.
which                    For keyboard events, specifies the
                         numeric code for the key that caused
                         the event,and for mouse events,
                         specifies which button was pressed (1
                         for left, 2 for middle, 3 for right). This
                         should be used instead of button, which
                         can’t be relied on to function
                         consistently across browsers.
Affecting the event propagation
• stopPropagation() : Prevent the event from
  bubbling further up the DOM tree
• preventDefault() : cancel any semantic action
  that the event might cause
Triggering event handlers
                 Command syntax: trigger
trigger(eventType)

Invokes any event handlers established for the passed event type for all
matched elements
Parameters
eventType          (String) Specifies the name of the event type for
                   handlers which are to be invoked
Returns
The wrapped set
Command syntax: eventName
eventName()

Invokes any event handlers established for the named event type for all
matched elements.

The supported commands are as follows:

  blur
●

● click 

● focus 

● select

● submit


Parameters
none
Returns
The wrapped set.
Other event-related commands


• Toggling listener
Command syntax: toggle
toggle(listenerOdd,listenerEven)

Establishes the passed functions as click event handlers on all elements of the
wrapped set that toggle between each other with every other trigger of a click
event
Parameters
listenerOdd                   (Function) A function that serves as the click
                              event handler for all odd-numbered clicks (the
                              first, the third, the fifth, and so on)
listenerEven                  (Function) A function that serves as the click
                              event handler for all even-numbered clicks (the
                              second, the fourth, the sixth, and so on)
Returns
The wrapped set
toggle()
 <html>
  <head>
   <title>jQuery Toggle Command Example</title>
   <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;>
   </script>
   <script type=quot;text/javascriptquot;>
    $(function(){
      $('#vstar').toggle(
        function(event) {
          $(event.target).css('opacity',0.4);
        },
        function(event) {
          $(event.target).css('opacity',1.0);
        }
      );
    });
   </script>
  </head>

  <body>
   <img id=quot;vstarquot; src=quot;vstar.jpgquot;/>
  </body>
 </html>
TODO
Reference
• jQuery in Action, Bear Bibeault,
  Yehuda Katz, Manning

Más contenido relacionado

La actualidad más candente

Introj Query Pt2
Introj Query Pt2Introj Query Pt2
Introj Query Pt2kshyju
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony AppsKris Wallsmith
 
International News | World News
International News | World NewsInternational News | World News
International News | World Newsjoblessbeach6696
 
Politics News and U.S. Elections Coverage
Politics News and U.S. Elections CoveragePolitics News and U.S. Elections Coverage
Politics News and U.S. Elections Coverageexcitedfoyer2246
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeRebecca Murphey
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC Newshonorablejourna10
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC Newspainstakingsled66
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC Newsalertchair8725
 
JavaOne TS-5098 Groovy SwingBuilder
JavaOne TS-5098 Groovy SwingBuilderJavaOne TS-5098 Groovy SwingBuilder
JavaOne TS-5098 Groovy SwingBuilderAndres Almiray
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitRebecca Murphey
 
Nightline: Late Evening News - ABC News
Nightline: Late Evening News - ABC NewsNightline: Late Evening News - ABC News
Nightline: Late Evening News - ABC Newscoldstudent3879
 

La actualidad más candente (20)

An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
Introj Query Pt2
Introj Query Pt2Introj Query Pt2
Introj Query Pt2
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
International News | World News
International News | World NewsInternational News | World News
International News | World News
 
Politics News and U.S. Elections Coverage
Politics News and U.S. Elections CoveragePolitics News and U.S. Elections Coverage
Politics News and U.S. Elections Coverage
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery Code
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC News
 
Web 5 | JavaScript Events
Web 5 | JavaScript EventsWeb 5 | JavaScript Events
Web 5 | JavaScript Events
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC News
 
Terrific Frontends
Terrific FrontendsTerrific Frontends
Terrific Frontends
 
Technology and Science News - ABC News
Technology and Science News - ABC NewsTechnology and Science News - ABC News
Technology and Science News - ABC News
 
WCLA12 JavaScript
WCLA12 JavaScriptWCLA12 JavaScript
WCLA12 JavaScript
 
Lecture 6: Client Side Programming 2
Lecture 6: Client Side Programming 2Lecture 6: Client Side Programming 2
Lecture 6: Client Side Programming 2
 
JavaOne TS-5098 Groovy SwingBuilder
JavaOne TS-5098 Groovy SwingBuilderJavaOne TS-5098 Groovy SwingBuilder
JavaOne TS-5098 Groovy SwingBuilder
 
Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1
 
Your Entity, Your Code
Your Entity, Your CodeYour Entity, Your Code
Your Entity, Your Code
 
React
React React
React
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development Toolkit
 
Nightline: Late Evening News - ABC News
Nightline: Late Evening News - ABC NewsNightline: Late Evening News - ABC News
Nightline: Late Evening News - ABC News
 

Destacado

jQuery and the W3C
jQuery and the W3CjQuery and the W3C
jQuery and the W3Cjeresig
 
Camera angles pdf
Camera angles pdfCamera angles pdf
Camera angles pdfchloejane16
 
Visual Gallery of Special Effects APPS
Visual Gallery of Special Effects APPSVisual Gallery of Special Effects APPS
Visual Gallery of Special Effects APPSBernajean Porter
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 
jQuery Internals + Cool Stuff
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuffjeresig
 

Destacado (8)

Telling Photo Tales v3
 Telling Photo Tales v3 Telling Photo Tales v3
Telling Photo Tales v3
 
jQuery and the W3C
jQuery and the W3CjQuery and the W3C
jQuery and the W3C
 
Camera angles pdf
Camera angles pdfCamera angles pdf
Camera angles pdf
 
Visual Gallery of Special Effects APPS
Visual Gallery of Special Effects APPSVisual Gallery of Special Effects APPS
Visual Gallery of Special Effects APPS
 
Camera Language
Camera LanguageCamera Language
Camera Language
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
jQuery Internals + Cool Stuff
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
 

Similar a jQuery : Events are where it happens!

Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2borkweb
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulationborkweb
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom ManipulationMohammed Arif
 
jQuery for Sharepoint Dev
jQuery for Sharepoint DevjQuery for Sharepoint Dev
jQuery for Sharepoint DevZeddy Iskandar
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone InteractivityEric Steele
 
the next web now
the next web nowthe next web now
the next web nowzulin Gu
 
Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009borkweb
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportBen Scofield
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax componentsIgnacio Coloma
 
Javascript Experiment
Javascript ExperimentJavascript Experiment
Javascript Experimentwgamboa
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)Carles Farré
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Librariesjeresig
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 
Solr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJsSolr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJsWildan Maulana
 
Upstate CSCI 450 WebDev Chapter 4
Upstate CSCI 450 WebDev Chapter 4Upstate CSCI 450 WebDev Chapter 4
Upstate CSCI 450 WebDev Chapter 4DanWooster1
 

Similar a jQuery : Events are where it happens! (20)

Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
Javascript and DOM
Javascript and DOMJavascript and DOM
Javascript and DOM
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
Events
EventsEvents
Events
 
jQuery for Sharepoint Dev
jQuery for Sharepoint DevjQuery for Sharepoint Dev
jQuery for Sharepoint Dev
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone Interactivity
 
the next web now
the next web nowthe next web now
the next web now
 
Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009
 
And the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack SupportAnd the Greatest of These Is ... Rack Support
And the Greatest of These Is ... Rack Support
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
 
Javascript Experiment
Javascript ExperimentJavascript Experiment
Javascript Experiment
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
jQuery
jQueryjQuery
jQuery
 
Solr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJsSolr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJs
 
Upstate CSCI 450 WebDev Chapter 4
Upstate CSCI 450 WebDev Chapter 4Upstate CSCI 450 WebDev Chapter 4
Upstate CSCI 450 WebDev Chapter 4
 
Client Web
Client WebClient Web
Client Web
 
Scripting The Dom
Scripting The DomScripting The Dom
Scripting The Dom
 

Más de Wildan Maulana

Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018Wildan Maulana
 
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...Wildan Maulana
 
Ketahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam MelonKetahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam MelonWildan Maulana
 
Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014Wildan Maulana
 
ICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi ArsipICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi ArsipWildan Maulana
 
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RWOpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RWWildan Maulana
 
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...Wildan Maulana
 
PostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyToolsPostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyToolsWildan Maulana
 
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...Wildan Maulana
 
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai SpMensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai SpWildan Maulana
 
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity ProviderKonfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity ProviderWildan Maulana
 
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)Wildan Maulana
 
Instalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphpInstalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphpWildan Maulana
 
River Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River RestorationRiver Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River RestorationWildan Maulana
 
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...
Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...Wildan Maulana
 
Penilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan DasarPenilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan DasarWildan Maulana
 
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and UsesProyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and UsesWildan Maulana
 
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang TuaOpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang TuaWildan Maulana
 
Menggunakan AlisJK : Equating
Menggunakan AlisJK : EquatingMenggunakan AlisJK : Equating
Menggunakan AlisJK : EquatingWildan Maulana
 

Más de Wildan Maulana (20)

Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018
 
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
 
Ketahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam MelonKetahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam Melon
 
Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014
 
ICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi ArsipICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi Arsip
 
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RWOpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
 
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
 
PostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyToolsPostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
 
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...
 
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai SpMensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
 
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity ProviderKonfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity Provider
 
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
 
Instalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphpInstalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphp
 
River Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River RestorationRiver Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River Restoration
 
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...
Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...
 
Penilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan DasarPenilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan Dasar
 
Statistik Listrik
Statistik ListrikStatistik Listrik
Statistik Listrik
 
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and UsesProyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
 
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang TuaOpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
 
Menggunakan AlisJK : Equating
Menggunakan AlisJK : EquatingMenggunakan AlisJK : Equating
Menggunakan AlisJK : Equating
 

Último

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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
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
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
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
 
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
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
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
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Último (20)

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
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
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
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
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
 
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
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
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
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

jQuery : Events are where it happens!

  • 1. #4 jQuery: Events are where it happens! Doc. v. 0.1 - 17/03/09 Wildan Maulana | wildan [at] tobethink.com
  • 2. What this presentation Covers • The event models as implemented by the browsers • Using jQuery to bind event handlers to elements • The Event object instance • Triggering event handlers under script control
  • 3. The GUI Rule 1.Set up the user interface 2.Wait for something interesting to happen 3.React accordingly 4.Repeat
  • 5. The DOM Level 0 Event Model <html> <head> <title>DOM Level 0 Events Example</title> <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;> Ready handlers defines </script> mouseover handlers <script type=quot;text/javascriptquot;> $(function(){ $('#vstar')[0].onmouseover = function(event) { say('Whee!'); Utility function emits text } to console }); function say(text) { $('#console').append('<div>'+new Date()+' '+text+'</div>'); } <div> element serve as </script> console <img> element is instrumented </head> <body> <img id=quot;vstarquot; src=quot;vstar.jpgquot; onclick=quot;say('Vroom vroom!')quot;/> <div id=quot;consolequot;></div> </body> </html>
  • 6. Event Handler onclick=quot;say('Vroom vroom!');quot; an anonymous function is automatically created using the value of the attribute as the function body imageElement.onclick = function(event) {   say('Vroom vroom!'); }
  • 7. The DOM Level 0 Event Model In Action
  • 9. Event Bubbling • What is Event Bubbling ?
  • 10. Event Bubbling in Action <html id=quot;greatgreatgrandpaquot;> <head> <title>DOM Level 0 Bubbling Example</title> <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;> Events propagating • </script> from the point of origin to the <script type=quot;text/javascriptquot;> $(function(){ top of the $('*').each(function(){ DOM tree var current = this; this.onclick = function(event) { if (!event) event = window.event; var target = (event.target) ? event.target : event.srcElement; say('For ' + current.tagName + '#'+ current.id + ' target is ' + target.id); } }); }); function say(text) { $('#console').append('<div>'+text+'</div>'); } </script> </head> <body id=quot;greatgrandpaquot;> <div id=quot;grandpaquot;> <div id=quot;popsquot;> <img id=quot;vstarquot; src=quot;vstar.jpgquot;/> </div> </div> <div id=quot;consolequot;></div> </body> </html>
  • 11. Affecting event propagation • If we want to prevent an event from propagating, we can use : – stopPropagation() method of the Event instance (for standard compliant browser) or – In internet explore, we set a property named cancelBubble to true in the Event instance
  • 12. Lack of DOM Level 0 • One severe shortcoming of the DOM Level 0 Event Model is that, because a property is used to store a reference to a function that’s to serve as an event handler,only one event handler per element can be registered for any specific event type someElement.onclick = doFirstThing; someElement.onclick = doSecondThing; Won't work ! • Using Observable pattern that establishes The solution a publish/subscribe schema for that handlers • Or using closure Or … • Using DOM Level 2 Event Model
  • 13. The DOM Level 2 Event Model
  • 14. Establishing events • Rather than assigning a function reference to an element property, DOM Level 2 event handlers— also termed listeners—are established via an element method. • Each DOM element defines a method named addEventListener() that’s used to attach event handlers (listeners) to the element addEventListener(eventType,listener,useCapture)
  • 15. addEventListener() addEventListener(eventType,listener,useCapture) EventType is a string that identifies the type of event to be handled useCapture, is a Boolean The listener parameter is a reference to the function (or inline function) that’s to be established as the handler for the named event type on the element
  • 16. Establishing event handlers with the DOM Level 2 Model <html> <head> <title>DOM Level 2 Events Example</title> <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;> </script> <script type=quot;text/javascriptquot;> $(function(){ var element = $('#vstar')[0]; element.addEventListener('click',function(event) { say('Whee once!'); },false); element.addEventListener('click',function(event) { say('Whee twice!'); },false); element.addEventListener('click',function(event) { say('Whee three times!'); },false); }); function say(text) { $('#console').append('<div>'+text+'</div>'); } </script> </head> <body> <img id=quot;vstarquot; src=quot;vstar.jpgquot;/> Remember : The Order of the execution <div id=quot;consolequot;></div> is not guaranteed ! It can be random ! </body> </html>
  • 17. Event Propagation Propagation in the DOM Level 2 Event Model traverses the DOM hierarchy twice: once from top to target during capture phase and once from target to top during bubble phase.
  • 18. <html id=quot;greatgreatgrandpaquot;> Tracking event propagation <head> with bubble and capture handlers <title>DOM Level 2 Propagation Example</title> <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;> </script> <script type=quot;text/javascriptquot;> $(function(){ $('*').each(function(){ var current = this; this.addEventListener('click',function(event) { say('Capture for ' + current.tagName + '#'+ current.id + ' target is ' + event.target.id); },true); this.addEventListener('click',function(event) { say('Bubble for ' + current.tagName + '#'+ current.id + ' target is ' + event.target.id); },false); }); }); function say(text) { $('#console').append('<div>'+text+'</div>'); } </script> </head> <body id=quot;greatgrandpaquot;> <div id=quot;grandpaquot;> <div id=quot;popsquot;> <img id=quot;vstarquot; src=quot;vstar.jpgquot;/> </div> </div> <div id=quot;consolequot;></div> </body> </html>
  • 19. The Internet Explore Event Model • Internet Explorer (both IE6 and, most disappointingly, IE7) doesn’t provide support for the DOM Level 2 Event addEventListener() → attachEvent(eventName,handler)
  • 20. The jQuery Event Model jQuery event implementation jQuery event implementation, exhibits the following features : • – Provides a unified method for establishing event handlers Allows multiple handlers for each event type on each element – – Uses standard event-type names: for example, click or mouseover – Makes the Event instance available as a parameter to the handlers – Normalizes the Event instance for the most often used properties – Provides unified methods for event canceling and default action blocking
  • 21. Binding event handlers using jQuery • Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind() command : $('img').bind('click',function(event){alert('Hi  there!');});
  • 22. Command syntax : bind bind(eventType,data,listener) Establishes a function as the event handler for the specified event type on all elements in the matched set. Parameters (String) Specifies the name of the event type eventType for which the handler is to be established. This event type can be namespaced with a suffix separated from the event name with a period character. See the remainder of this section for details. (Object) Caller-supplied data that’s attached data to the Event instance as a property named data for availability to the handler functions. If omitted, the handler function can be specified as the second parameter. (Function) The function that’s to be listener established as the event handler. Returns The wrapped set
  • 23. <html> bind() in action <head> <title>jQuery Events Example</title> <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;> </script> <script type=quot;text/javascriptquot;> $(function(){ $('#vstar') .bind('click',function(event) { say('Whee once!'); }) .bind('click',function(event) { say('Whee twice!'); }) .bind('click',function(event) { say('Whee three times!'); }); }); function say(text) { $('#console').append('<div>'+text+'</div>'); } </script> </head> <body> <img id=quot;vstarquot; src=quot;vstar.jpgquot;/> <div id=quot;consolequot;></div> </body> </html>
  • 24. Also works on IE ...
  • 25. Command syntax : specific event binding eventTypeName(listener) Establishes the specified function as the event handler for the event type named by the method’s name. The supported commands are as follows: blur focus mousedown resize ● ● ● ● ● change ● keydown ● mousemove ● scroll ● click ● keypress ● mouseout ● select ● dblclick ● keyup ● mouseover ● submit ● error ● load ● mouseup ● unload Note that when using these shortcut methods, we cannot specify a data value to be placed in the event.data property. Parameters (Function) The function that’s to be established as the listener event handler. Returns The wrapped set.
  • 26. Command syntax: one one(eventType,data,listener) Establishes a function as the event handler for the specified event type on all elements in the matched set. Once executed, the handler is automatically removed. Parameters eventType (String) Specifies the name of the event type for which the handler is to be established. data (Object) Caller-supplied data that’s attached to the Event instance for availability to the handler functions. If omitted, the handler function can be specified as the second parameter. listener (Function) The function that’s to be established as the event handle Returns The wrapped set.
  • 27. Removing event handlers Command syntax: unbind unbind(eventType,listener) unbind(event) Removes events handlers from all elements of the wrapped set as specified by the optional passed parameters. If no parameters are provided, all listeners are removed from the elements. Parameters eventType (String) If provided, specifies that only listeners established for the specified event type are to be removed. listener (Function) If provided, identifies the specific listener that’s to be remove event (Event) Removes the listener that triggered the event described by this Event instance. Returns The wrapped set.
  • 28. Inspecting the Event instance Property Description Set to true if the Alt key was pressed when the altKey event was triggered, false if not. The Alt key is labeled Option on most Mac keyboards. Set to true if the Ctrl key was pressed when the ctrlKey event was triggered, false if not. The value, if any, passed as the second data parameter to the bind() command when the handler was established. For keyup and keydown events, this returns the keyCode key that was pressed. Note that for alphabetic characters, the uppercase version of the letter will be returned, regardless of whether the user typed an uppercase or lowercase letter. For example, both a and A will return 65. You can use shiftKey to determine which case was entered. For keypress events, use the which property, which is reliable across browsers.
  • 29. Inspecting the Event instance metaKey Set to true if the Meta key was pressed when the event was triggered, false if not.The Meta key is the Ctrl key on PCs and the Command key on Macs. pageX For mouse events, specifies the horizontal coordinate of the event relative from the page origin. pageY For mouse events, specifies the vertical coordinate of the event relative from the page origin. relatedTarget For some mouse events, identifies the element that the cursor left or entered when the event was triggered. screenX For mouse events, specifies the horizontal coordinate of the event relative from the screen origin. screenY For mouse events, specifies the vertical coordinate of the event relative from the screen origin.
  • 30. Inspecting the Event instance Set to true if the Shift key was pressed shiftKey when the event was triggered, false if not. target Identifies the element for which the event was triggered. type For all events, specifies the type of event that was triggered (for example, click). This can be useful if you’re using one event handler function for multiple events. which For keyboard events, specifies the numeric code for the key that caused the event,and for mouse events, specifies which button was pressed (1 for left, 2 for middle, 3 for right). This should be used instead of button, which can’t be relied on to function consistently across browsers.
  • 31. Affecting the event propagation • stopPropagation() : Prevent the event from bubbling further up the DOM tree • preventDefault() : cancel any semantic action that the event might cause
  • 32. Triggering event handlers Command syntax: trigger trigger(eventType) Invokes any event handlers established for the passed event type for all matched elements Parameters eventType (String) Specifies the name of the event type for handlers which are to be invoked Returns The wrapped set
  • 33. Command syntax: eventName eventName() Invokes any event handlers established for the named event type for all matched elements. The supported commands are as follows:  blur ● ● click  ● focus  ● select ● submit Parameters none Returns The wrapped set.
  • 34. Other event-related commands • Toggling listener
  • 35. Command syntax: toggle toggle(listenerOdd,listenerEven) Establishes the passed functions as click event handlers on all elements of the wrapped set that toggle between each other with every other trigger of a click event Parameters listenerOdd (Function) A function that serves as the click event handler for all odd-numbered clicks (the first, the third, the fifth, and so on) listenerEven (Function) A function that serves as the click event handler for all even-numbered clicks (the second, the fourth, the sixth, and so on) Returns The wrapped set
  • 36. toggle() <html> <head> <title>jQuery Toggle Command Example</title> <script type=quot;text/javascriptquot; src=quot;../scripts/jquery-1.2.1.jsquot;> </script> <script type=quot;text/javascriptquot;> $(function(){ $('#vstar').toggle( function(event) { $(event.target).css('opacity',0.4); }, function(event) { $(event.target).css('opacity',1.0); } ); }); </script> </head> <body> <img id=quot;vstarquot; src=quot;vstar.jpgquot;/> </body> </html>
  • 37. TODO
  • 38. Reference • jQuery in Action, Bear Bibeault, Yehuda Katz, Manning