W3cubDocs

/Dojo

dojo/on

Summary

A function that provides core event listening functionality. With this function you can provide a target, event type, and listener to be notified of future matching events that are fired.

To listen for "click" events on a button node, we can do:

define(["dojo/on"], function(listen){
    on(button, "click", clickHandler);
    ...

Evented JavaScript objects can also have their own events.

var obj = new Evented;
on(obj, "foo", fooHandler);

And then we could publish a "foo" event:

on.emit(obj, "foo", {key: "value"});

We can use extension events as well. For example, you could listen for a tap gesture:

define(["dojo/on", "dojo/gesture/tap", function(listen, tap){
    on(button, tap, tapHandler);
    ...

which would trigger fooHandler. Note that for a simple object this is equivalent to calling:

obj.onfoo({key:"value"});

If you use on.emit on a DOM node, it will use native event dispatching when possible.

Usage

on(target,type,listener,dontFix);
Parameter Type Description
target Element | Object

This is the target object or DOM element that to receive events from

type String | Function

This is the name of the event to listen for or an extension event type.

listener Function

This is the function that should be called when the event fires.

dontFix undefined

Returns: Object | undefined

An object with a remove() method that can be used to stop listening for this event.

See the dojo/on reference documentation for more information.

Methods

emit(target,type,event)

Defined by dojo/on

Parameter Type Description
target undefined
type undefined
event undefined

Returns: undefined

matches(node,selector,context,children,matchesTarget)

Defined by dojo/on

Check if a node match the current selector within the constraint of a context

Parameter Type Description
node DOMNode

The node that originate the event

selector String

The selector to check against

context DOMNode

The context to search in.

children Boolean

Indicates if children elements of the selector should be allowed. This defaults to true

matchesTarget Object | dojo/query
Optional

An object with a property "matches" as a function. Default is dojo/query. Matching DOMNodes will be done against this function The function must return a Boolean. It will have 3 arguments: "node", "selector" and "context" True is expected if "node" is matching the current "selector" in the passed "context"

Returns: DOMNode

The matching node, if any. Else you get false

once(target,type,listener,dontFix)

Defined by dojo/on

This function acts the same as on(), but will only call the listener once. The listener will be called for the first event that takes place and then listener will automatically be removed.

Parameter Type Description
target undefined
type undefined
listener undefined
dontFix undefined

Returns: undefined

parse(target,type,listener,addListener,dontFix,matchesTarget)

Defined by dojo/on

Parameter Type Description
target undefined
type undefined
listener undefined
addListener undefined
dontFix undefined
matchesTarget undefined

Returns: undefined

pausable(target,type,listener,dontFix)

Defined by dojo/on

This function acts the same as on(), but with pausable functionality. The returned signal object has pause() and resume() functions. Calling the pause() method will cause the listener to not be called for future events. Calling the resume() method will cause the listener to again be called for future events.

Parameter Type Description
target undefined
type undefined
listener undefined
dontFix undefined

Returns: undefined

selector(selector,eventType,children)

Defined by dojo/on

Creates a new extension event with event delegation. This is based on the provided event type (can be extension event) that only calls the listener when the CSS selector matches the target of the event.

The application must require() an appropriate level of dojo/query to handle the selector.

Parameter Type Description
selector undefined

The CSS selector to use for filter events and determine the |this| of the event listener.

eventType undefined

The event to listen for

children undefined

Indicates if children elements of the selector should be allowed. This defaults to true

Returns: it, or programatically by arrow key handling code.

Examples

Example 1

require(["dojo/on", "dojo/mouse", "dojo/query!css2"], function(listen, mouse){
    on(node, on.selector(".my-class", mouse.enter), handlerForMyHover);

© 2005–2017 JS Foundation
Licensed under the AFL 2.1 and BSD 3-Clause licenses.
http://dojotoolkit.org/api/1.10/dojo/on.html