Events
The Manipulator-event model, has been designed to be as close to regular JavaScript event-handling as possible. Keeping close to the actual standard (JavaScript), you can easily make your own adjustments and/or detours, without inventing new events. So why not just use regular JavaScript events? Well, because we still need to be able to support older browsers seamlessly, and when it comes to advanced event handling, with possibly many different event listeners on the same node, it makes sense to encapsulate some functionality in a shorthand function.
Manipulator only adds the event listeners it requires at any given time. IE, to catch a click-event, it only applies a mousedown-event to the node. When the mousedown event occurs, it adds the mouseup event. When the mouseup event occurs, it resets the applied listeners. This way you always have as few event listeners as possible applied at any given time.
Manipulator automatically detects touch-event support and applies events appropriately. It even supports dual events on devices with both touch and mouse input. Manipulator also has seamless fallback to browsers using attachEvent.
For window and browser events, see the Browser events documentation. For drag and swipe events, see the Movements documentation.
Functions
Util.Events.hold
Definition
- Name
- Util.Events.hold
- Shorthand
- u.e.hold
- Syntax
- Void = Util.Events.hold( Node node [, JSON _options ] );
Description
Add hold event listener to node. Declare node.held function to receive callback on Event occurrence. A hold-event occurs after 750ms.
If your scripts are using the Manipulator Google Analytics module, the hold-event will be registered automatically (see Parameters for options).
On touch capable devices drag/move will always cancel hold, because it is considered scrolling. On mouse capable devices mouseout will cancel the hold.
Parameters
- node
-
Node node to add hold event listener to.
- _options
-
JSON Optional event settings
Options
Return values
Void
Callbacks
- node.held(event)
- when held event occurs
- node.inputStarted(event)
- when mousedown or touchstart event occurs
- node.moved(event)
- when movement occurs after mousedown or touchstart
- node.clickCancelled(event)
- when dblclick event listener is cancelled
Examples
u.e.hold(node);
node.held = function(event) {
// do what you want
}
With tracking eventCategory:
u.e.hold(node, {"eventCategory":"Holding"});
node.held = function(event) {
// do what you want
}
Dependencies
JavaScript
none
Manipulator
- Util.Events.addStartEvent
- Util.Events.resetNestedEvents
Util.Events.click
Definition
- Name
- Util.Events.click
- Shorthand
- u.e.click
- Syntax
- Void = Util.Events.click( Node node [, JSON _options ] );
Description
Add a click event listener using either mouse- or touchevents depending on device support (Autodetected).
Invokes callback to node.clicked when click event occurs, if node.clicked exists.
If your scripts are using the Manipulator Google Analytics module, the click-event will be registered automatically (see Parameters for options).
If your clickable node is inside a draggable node, dragging the node will prevent the node.clicked callback. On touch capable devices drag/move will always cancel click because it is considered scrolling. On mouse capable devices mouseout will cancel the click.
Parameters
- node
-
Node node to add click eventlistener to.
- _options
-
JSON Optional event settings
Options
Return values
Void
Callbacks
- node.clicked(event)
- when click event occurs
- node.inputStarted(event)
- when mousedown or touchstart event occurs
- node.moved(event)
- when movement occurs after mousedown or touchstart
- node.clickCancelled(event)
- when dblclick event listener is cancelled
Examples
u.e.click(node);
node.clicked = function(event) {
// do what you want
}
With tracking eventCategory:
u.e.click(node, {"eventCategory":"Clicking"});
node.clicked = function(event) {
// do what you want
}
Dependencies
JavaScript
none
Manipulator
- Util.Events.addStartEvent
- Util.Events.resetNestedEvents
Util.Events.dblclick
Definition
- Name
- Util.Events.dblclick
- Shorthand
- u.e.dblclick
- Syntax
- Void = Util.Events.dblclick( Node node [, JSON _options ] );
Description
Add a dblclick event listener using either mouse- or touchevents depending on device support (Autodetected).
Invokes callback to node.dblclicked when dblclick event occurs, if node.dblclicked exists.
If your scripts are using the Manipulator Google Analytics module, the dblclick-event will be registered automatically (see Parameters for options).
If your clickable node is inside a draggable node, dragging the node will prevent the node.dblclicked callback. On touch capable devices drag/move will always cancel dblclick because it is considered scrolling. On mouse capable devices mouseout will cancel the dblclick.
As of now, the dblclick-event does not work in IE8 and older because they require a specific dblclick event.
Parameters
- node
-
Node node to add dblclick event listener to.
- _options
-
JSON Optional event settings
Options
Return values
Void
Callbacks
- node.dblclicked(event)
- when doubleclick event occurs
- node.inputStarted(event)
- when mousedown or touchstart event occurs
- node.moved(event)
- when movement occurs after mousedown or touchstart
- node.clickCancelled(event)
- when dblclick event listener is cancelled
Examples
u.e.dblclick(node);
node.dblclicked = function(event) {
// do what you want
}
With tracking eventCategory:
u.e.dblclick(node, {"eventCategory":"DblClicking"});
node.dblclicked = function(event) {
// do what you want
}
Dependencies
JavaScript
none
Manipulator
- Util.Events.addStartEvent
- Util.Events.resetNestedEvents
- Util.Timer.valid
- Util.Timer.setTimer
Util.Events.hover
Definition
- Name
- Util.Events.hover
- Shorthand
- u.e.hover
- Syntax
- Void = Util.Events.hover( Node node [, JSON _options ] );
Description
Add hover event listeners using either mouse- or touchevents depending on device support (Autodetected).
Invokes callback to node.over and node.out when true event occurs.
Out events occuring due to mouse passing over childnodes are ignored.
Parameters
- node
-
Node node to add hover event listener to.
- _options
-
JSON Optional options for hover
Options
Return values
Void
Callbacks
- node.over(event)
- when mouseover or touchstart event occurs
- node.out(event)
- when mouseout or touchend event occurs
Examples
u.e.hover(node);
node.over = function(event) {
// pointer has entered node
}
node.out = function(event) {
// pointer has left node
}
Dependencies
JavaScript
none
Manipulator
- Util.Events.addOverEvent
- Util.Events.addOutEvent
- Util.Timer.setTimer
Util.Events.kill
Definition
- Name
- Util.Events.kill
- Shorthand
- u.e.kill
- Syntax
- Void = Util.Events.kill( Event event );
Description
Prevent default action, propagation, event bubbling. In other words - kill the event.
Parameters
- event
-
Event Event to kill
Return values
Void
Examples
node.clicked = function(event) {
u.e.kill(event);
}
Stops event from bubbling to parent elements.
Dependencies
JavaScript
- event.preventDefault
- event.stopPropagation
Manipulator
none
Util.Events.addEvent
Definition
- Name
- Util.Events.addEvent
- Shorthand
- u.e.addEvent
- Syntax
- Void = Util.Events.addEvent( Node node, String type, Function action );
Description
Add eventlistener for type-event to node, and apply action as event handler.
Action will be executed on node.
Parameters
- node
-
Node node to add eventlistener to
- type
-
String type of event listener (click, mouseover, scroll, etc.)
- action
-
Function function to execute on event occurrence
Return values
Void
Examples
<div class="scene"></div>
<script>
var header = u.querySelector(".header");
header.mousemoved = function(event) {
// function body
}
u.e.addEvent(header, mousemove, header.mousemoved);
</script>
Dependencies
JavaScript
- try ... catch
- document.addEventListener
- document.attachEvent
Manipulator
none
Util.Events.removeEvent
Definition
- Name
- Util.Events.removeEvent
- Shorthand
- Util.Events.removeEvent
- Syntax
- Void = Util.Events.removeEvent( Node node, String type, Function action );
Description
Remove eventlistener with action for type-event from node.
Parameters
- node
-
Node node to remove eventlistener from
- type
-
String type of event listener (click, mouseover, scroll, etc.)
- action
-
Function function to be removed from stack
Return values
Void
Examples
<div class="scene"></div>
<script>
var header = u.querySelector(".header");
header.mousemoved = function(event) {
// function body
}
u.e.removeEvent(header, mousemove, header.mousemoved);
</script>
Dependencies
JavaScript
- try ... catch
- document.removeEventListener
Manipulator
none
Util.Events.addStartEvent
Definition
- Name
- Util.Events.addStartEvent
- Shorthand
- u.e.addStartEvent
- Syntax
- Void = Util.Events.addStartEvent( Node node, Function action );
Description
Cross-input listener for start event, adding start eventlistener (mousedown or touchstart).
Action will be executed on node.
Parameters
- node
-
Node to add start input eventlistener to
- action
-
Function function to execute on node when event occurs
Return values
Void
Examples
<div class="scene"></div>
<script>
var header = u.querySelector(".header");
header.inputstarted = function(event) {
// function body
}
u.e.addStartEvent(header, header.inputstarted);
</script>
Dependencies
JavaScript
none
Manipulator
- Util.Events.addEvent
Util.Events.removeStartEvent
Definition
- Name
- Util.Events.removeStartEvent
- Shorthand
- u.e.removeStartEvent
- Syntax
- Void = Util.Events.removeStartEvent( Node node, Function action );
Description
Remove input start eventlistener.
Parameters
- node
-
Node to remove start input eventlistener from
- action
-
Function function to be removed from stack
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.Events.removeEvent
Util.Events.addMoveEvent
Definition
- Name
- Util.Events.addMoveEvent
- Shorthand
- u.e.addMoveEvent
- Syntax
- Void = Util.Events.addMoveEvent( Node node, Function action );
Description
Cross-input listener for move event, adding move eventlistener (mousemove or touchmove).
Action will be executed on node.
Parameters
- node
-
Node to add move input eventlistener to
- action
-
Function function to execute on node when event occurs
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.Events.addEvent
Util.Events.removeMoveEvent
Definition
- Name
- Util.Events.removeMoveEvent
- Shorthand
- u.e.removeMoveEvent
- Syntax
- Void = Util.Events.removeMoveEvent( Node node, Function action );
Description
Remove input move eventlistener.
Parameters
- node
-
Node to remove move input eventlistener from
- action
-
Function function to be removed from stack
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.Events.removeEvent
Util.Events.addEndEvent
Definition
- Name
- Util.Events.addEndEvent
- Shorthand
- u.e.addEndEvent
- Syntax
- Void = Util.Events.addEndEvent( Node node, Function action );
Description
Cross-input listener for end event, adding end eventlistener (mouseup or touchend).
Action will be executed on node.
If mouse capable device and node.snapback function is declared, node.snapback will be called on mouseout.
Parameters
- node
-
Node to add end input eventlistener to
- action
-
Function function to execute on node when event occurs
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.Events.addEvent
Util.Events.removeEndEvent
Definition
- Name
- Util.Events.removeEndEvent
- Shorthand
- u.e.removeEndEvent
- Syntax
- Void = Util.Events.removeEndEvent( Node node, Function action );
Description
Remove input end eventlistener.
Parameters
- node
-
Node to remove end input eventlistener from
- action
-
Function function to be removed from stack
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.Events.removeEvent
Util.Events.resetClickEvents
Definition
- Name
- Util.Events.resetClickEvents
- Shorthand
- u.e.resetClickEvents
- Syntax
- Void = Util.Events.resetClickEvents( Node node );
Description
Reset all click-related events on node, returning them to their initial state. You can use this on nodes with multiple click-handlers if you need an advanced level of event handling.
Most basic event handling and cancellation is automatically handled by the existing functions - this function is only relevant in edge case scenarios.
Parameters
- node
-
Node node to reset click-events on.
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.timer.resetTimer
- Util.Events.removeEvent
Util.Events.resetEvents
Definition
- Name
- Util.Events.resetEvents
- Shorthand
- u.e.resetEvents
- Syntax
- Void = Util.Events.resetEvents( Node node );
Description
Reset all events on node, returning them to their initial state. You can use this on nodes with multiple event-handler if you need an advanced level of event handling
Most basic event handling and cancellation is automatically handled by the existing functions - this function is only relevant in edge case scenarios.
Parameters
- node
-
Node node to reset events on.
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.Events.resetClickEvents
- Util.Events.resetDragEvents
Util.Events.resetNestedEvents
Definition
- Name
- Util.Events.resetNestedEvents
- Shorthand
- u.e.resetNestedEvents
- Syntax
- Void = Util.Events.resetNestedEvents( Node node );
Description
Reset all events on node and parentNodes, returning them to their initial state. You can use this on nodes with multiple nested event-handlers, to make sure only the correct event surfaces.
Most basic event handling and cancellation is automatically handled by the existing functions - this function is only relevant in edge case scenarios.
For example, if you have a list, with draggable nodes, and inside each node is a clickable child. If a mousedown occurs, it can be the start of either a click or a drag. If a mousemove event occurs before a mouseup, you want to reset the click listener, to avoid a click from happening when the mouseup occurs.
Parameters
- node
-
Node child node to start nested reset on.
Return values
Void
Examples
No examples
Dependencies
JavaScript
none
Manipulator
- Util.Events.resetEvents
Files
Main file
- u-events.js
Segment support files
- u-events-desktop_light.js
Segment dependencies
- desktop_edge
- u-events.js + u-timer.js + u-geometry.js
- desktop_ie11
- u-events.js + u-timer.js + u-geometry.js
- desktop
- u-events.js + u-timer.js + u-geometry.js
- desktop_ie10
- u-events.js + u-timer.js + u-geometry.js
- desktop_ie9
- u-events.js + u-timer.js + u-geometry.js
- desktop_light
- u-events.js + u-events-desktop_light.js + u-timer.js + u-dom.js + u-geometry.js + u-string.js + u-array-desktop_light.js
- tablet
- u-events.js + u-timer.js + u-geometry.js
- tablet_light
- u-events.js + u-timer.js + u-geometry.js
- smartphone
- u-events.js + u-timer.js + u-geometry.js
- mobile
- not tested
- mobile_light
- not tested
- tv
- u-events.js + u-events-desktop_light.js + u-timer.js + u-dom.js + u-geometry.js + u-string.js + u-array-desktop_light.js
- seo
- not supported