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
(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