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
eventCategory
Category label for tracking. Default: Uncategorized
eventAction
Action label for tracking. Default: Held
eventLabel
Additional label for tracking. Default: event.target.url or small except of node content
eventValue
Value label for tracking. Default: Null
nonInteraction
nonInteraction value for tracking. Default: false
hitCallback
Callback for successful tracking. Default: null

Returns

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 }

Uses

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
eventCategory
Category label for tracking. Default: Uncategorized
eventAction
Action label for tracking. Default: Clicked
eventLabel
Additional label for tracking. Default: event.target.url or small except of node content
eventValue
Value label for tracking. Default: Null
nonInteraction
nonInteraction value for tracking. Default: false
hitCallback
Callback for successful tracking. Default: null

Returns

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 }

Uses

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
eventCategory
Category label for tracking. Default: Uncategorized
eventAction
Action label for tracking. Default: DblClicked
eventLabel
Additional label for tracking. Default: event.target.url or small except of node content
eventValue
Value label for tracking. Default: Null
nonInteraction
nonInteraction value for tracking. Default: false
hitCallback
Callback for successful tracking. Default: null

Returns

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 }

Uses

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
delay_over
over-event delay - stalling over event.
delay
out-event delay - stalling out event.
over
Callback function name of over callback. Default is over.
out
Callback function name of out callback. Default is out.

Returns

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 }

Uses

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

Returns

Void

Examples

node.clicked = function(event) { u.e.kill(event); }

Stops event from bubbling to parent elements.

Uses

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

Returns

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>

Uses

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

Returns

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>

Uses

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

Returns

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>

Uses

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

Returns

Void

Examples

No examples

Uses

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

Returns

Void

Examples

No examples

Uses

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

Returns

Void

Examples

No examples

Uses

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

Returns

Void

Examples

No examples

Uses

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

Returns

Void

Examples

No examples

Uses

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.

Returns

Void

Examples

No examples

Uses

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.

Returns

Void

Examples

No examples

Uses

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.

Returns

Void

Examples

No examples

Uses

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