Download as pdf or txt
Download as pdf or txt
You are on page 1of 1

YUI Library: Event Utility & Custom Event 2008-2-19 v2.

5
Simple Use Case: Adding Event Listeners Simple Use Case: Custom Event Event Utility Methods:
myEvt = new YAHOO.util.CustomEvent("my event"); addListener(…)
YAHOO.util.Event.addListener("myDiv", "click",
mySubscriber = function(type, args) { getCharCode(e)
fnCallback); getListeners(el [, type])
alert(args[0]); } //alerts the first argument
Adds the function fnCallback as a listener for the click event on an myEvt.subscribe(mySubscriber); getPageX(e)
HTML element whose id attribute is myDiv. myEvt.fire("hello world"); getPageY(e)
getRelatedTarget(e)
Creates a new Custom Event instance and a subscriber function; the subscriber getTarget(e)
Invocation (addListener) alerts the event's first argument, "hello world", when the event is fired. getTime(e)
getXY(e): returns array
YAHOO.util.Event.addListener(str | el ref | arr
Constructor (Custom Event) [pageX, pageY]
target[s], str event, fn callback[, obj onAvailable(s id || el ref, fn
associated object, b scope); YAHOO.util.CustomEvent(str event name[, obj scope object, callback, o obj, b scope)
b silent, int signature ]); onContentReady(s id || el
Arguments: ref, fn callback, o obj, b
(1) Element or elements: You may pass a single element or group of Arguments:
scope)
elements in an array; references may be id strings or direct element (1) Event name: A string identifying the event.
onDOMReady(s id || el ref,
(2) Scope object: The default scope in which subscribers will run; can be
references. fn callback, o obj, b
overridden in subscribe method.
(2) Event: A string indicating the event ('click', 'keypress', etc.). scope)
(3) Silent: If true, hides event's activity from Logger when in debug mode.
(3) Callback: The function to be called when the event fires. preventDefault(e)
(4) Argument signature: YAHOO.util.CustomEvent.LIST by default — all
(4) Associated object: Object to which your callback will have purgeElement(el [,
arguments passed to handler in a single array. .FLAT can be specified to
recurse, type])
access; often the callback's parent object. pass only the first argument. removeListener(…)
(5) Scope: Boolean — if true, the callback runs in the scope of the stopEvent(e): same as
associated object. Subscribing to a Custom Event preventDefault plus
stopPropagation
Event Utility Solutions myEvt.subscribe(fn callback[, obj associated object, b
scope]);
stopPropagation(e)

Using onAvailable: Arguments for subscribe:


DOM Event Object
fnCallback = function() { //will fire when element (1) Callback: The function to be called when the event fires. Properties & Methods:
(2) Associated object: Object to which your callback will have access as an altKey (b)
becomes available}
argument; often the callback's parent object. bubbles (b)
YAHOO.util.Event.onAvailable('myDiv', fnCallback); (3) Scope: Boolean — if true, the callback runs in the scope of the associated cancelable (b)
Using Event's convenience methods: object. *charcode (i)
fnCallback = function(e, obj) { Arguments received by your callback function: clientX (i)
myTarget = YAHOO.util.Event.getTarget(e, 1); When using the default argument signature (YAHOO.util.CustomEvent.LIST; clientY (i)
see Constructor section above), your callback gets three arguments: ctrlKey (b)
//2nd argument tells Event to resolve text nodes currentTarget (el)
} (1) Type: The type of Custom Event, a string. eventPhase (i)
YAHOO.util.Event.addListener('myDiv', 'mouseover', (2) Arguments: All arguments passed in during fire, as an array. isChar (b)
fnCallback, obj); (3) Associated object: The associated object passed in during subscribe, if keyCode (i)
present. metaKey (i)
Prevent the event's default behavior from proceeding:
myEvt.fire(arg1, arg2); *pageX (i)
YAHOO.util.Event.preventDefault(e); var myHandler = function(sType, aArgs, oObj) {/*aArgs=[arg1, arg2]*/}; *pageY (i)
myEvt.subscribe(myHandler, oObj); *preventDefault()
Remove listener: *relatedTarget (el)
When using the optional argument signature (YAHOO.util.CustomEvent.FLAT;
YAHOO.util.Event.removeListener('myDiv', see Constructor section above), your callback gets two arguments: screenX (i)
'mouseover', fnCallback); screenY (i)
(1) Argument: The first argument passed when the event is fired. shiftKey (b)
(2) Associated object: Passed in during subscribe, if present. *stopPropagation()
Dependencies myEvt.fire(arg1); *target (el)
var myHandler = function(arg, oObj) {/*arg=arg1*/}; *timestamp (long)
Event Utility requires the YAHOO Global Object. myEvt.subscribe(myHandler, oObj); type (s)
[ *use Event Utility method ]

You might also like