jquery : events are where it happens!

Post on 05-Jul-2015

6.545 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

jQuery: Events are where it happens!

Doc. v. 0.1 - 17/03/09

Wildan Maulana | wildan [at] tobethink.com

#4

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 interface2.Wait for something interesting to

happen3.React accordingly4.Repeat

Understanding the browser event model

The DOM Level 0 Event Model<html> <head> <title>DOM Level 0 Events Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(function(){ $('#vstar')[0].onmouseover = function(event) { say('Whee!'); } });

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

<body> <img id="vstar" src="vstar.jpg" onclick="say('Vroom vroom!')"/> <div id="console"></div> </body></html>

Ready handlers definesmouseover handlers

Utility function emits textto console

<img> element is instrumented

Ready handlers definesmouseover handlers

<div> element serve asconsole

Event Handler

onclick="say('Vroom vroom!');"

imageElement.onclick = function(event) {  say('Vroom vroom!');}

an anonymous function is automatically created using the value

of the attribute as the function body

The DOM Level 0 Event Model In Action

The Event instance

Event Bubbling

• What is Event Bubbling ?

Event Bubbling in Action

• Events propagating from the point of origin to the top of the DOM tree

<html id="greatgreatgrandpa"> <head> <title>DOM Level 0 Bubbling Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(function(){ $('*').each(function(){ 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="greatgrandpa"> <div id="grandpa"> <div id="pops"> <img id="vstar" src="vstar.jpg"/> </div> </div> <div id="console"></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 a publish/subscribe schema for that handlers• Or using closure Or …• Using DOM Level 2 Event Model

The solution

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

The listener parameter is a referenceto the function (or inline function) that’s to be established as the handler for the named event type on the element

useCapture, is a Boolean

Establishing event handlers with the DOM Level 2 Model

<html> <head> <title>DOM Level 2 Events Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(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="vstar" src="vstar.jpg"/> <div id="console"></div> </body></html>

Remember : The Order of the execution is not guaranteed ! It can be random !

Event Propagation

Propagation in the DOM Level 2 Event Model traverses the DOMhierarchy twice: once from top to target during capture phase and once from target to top during bubble phase.

Tracking event propagation with bubble and capture handlers

<html id="greatgreatgrandpa"> <head> <title>DOM Level 2 Propagation Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(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="greatgrandpa"> <div id="grandpa"> <div id="pops"> <img id="vstar" src="vstar.jpg"/> </div> </div> <div id="console"></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 ModeljQuery 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 : bindbind(eventType,data,listener)

Establishes a function as the event handler for the specified event type on all elements in the matched set.

Parameters

eventType (String) Specifies the name of the event type for which the handler is to be established. This event type can be namespaced with a suffix separatedfrom the event name with a period character. See the remainder of thissection for details.

data (Object) Caller-supplied data that’s attached to the Event instance as aproperty named data for availability to the handler functions. If omitted, thehandler function can be specified as the second parameter.

listener (Function) The function that’s to be established as the event handler.

Returns

The wrapped set

bind() in action<html> <head> <title>jQuery Events Example</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(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="vstar" src="vstar.jpg"/> <div id="console"></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● change● click● dblclick● error

● focus● keydown● keypress● keyup● load

● mousedown● mousemove● mouseout● mouseover● mouseup

● resize● scroll● select● submit● unload

Note that when using these shortcut methods, we cannot specify a data value to be placed in the event.data property.

Parameters

listener (Function) The function that’s to be established as the 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 handlersCommand 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 instanceProperty Description

altKey Set to true if the Alt key was pressed when the event was triggered, false if not. The Alt key is labeled Option on most Mac keyboards.

ctrlKey Set to true if the Ctrl key was pressed when the event was triggered, false if not.

data The value, if any, passed as the second parameter to the bind() command when thehandler was established.

keyCode For keyup and keydown events, this returns the 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

shiftKey Set to true if the Shift key was pressed 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 handlersCommand 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="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(function(){ $('#vstar').toggle( function(event) { $(event.target).css('opacity',0.4); }, function(event) { $(event.target).css('opacity',1.0); } ); }); </script> </head>

<body> <img id="vstar" src="vstar.jpg"/> </body></html>

TODO

Reference

• jQuery in Action, Bear Bibeault, Yehuda Katz, Manning

top related