Browser events

Events related to page rendering or the window object.

Knowing when to starting applying JavaScript to your page is essential for providing a good user experience. When it comes to JavaScript, everything starts with the DOMReady event or the legacy onload event. Manipulator provides handlers for these events with seamless fallback for older browsers.

Some events (like scrolling or resizing) typically occur on the window object, but a lot of times you want to handle the event in a different context. That is why Manipulator provides an extensive set of function, which can register eventListeners on the window object, but redirect the callback to a specific node.

Functions

Util.Events.addDOMReadyEvent

Definition

Name
Util.Events.addDOMReadyEvent
Syntax
Void = Util.Events.addDOMReadyEvent( Function action );

Description

Add DOM Ready event. dependencies DOMContentLoaded if supported by browser, or falls back to regular document.onload event. action is executed on window object.

When using dom-ready with webfonts - the line-height will update after dom-ready (when the fonts load) and this may have an impact on absolute positioning. This can be partly minimized by always stating line-heights in the CSS - but final rendering widths may still change paragraph heights because number of lines might change.

Parameters

action
Function function to execute on event

Return values

Void

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.addOnloadEvent

Definition

Name
Util.Events.addOnloadEvent
Syntax
Void = Util.Events.addOnloadEvent( Function action );

Description

Add document.onload event handler. action is executed on window object.

Parameters

action
Function function to execute on event

Return values

Void

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.addWindowEvent

Definition

Name
Util.Events.addWindowEvent
Syntax
String = Util.Events.addWindowEvent( Node node, String type, Function action );

Description

Add window event handler with custom callback node.

Parameters

node
Node node to execute callback on
type
String Event to listen for
action
Function function to execute on event

Return values

String event id, to be used if event needs to be cancelled.

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.removeWindowEvent

Definition

Name
Util.Events.removeWindowEvent
Syntax
Void = Util.Events.removeWindowEvent( Node node, String type, String id );

Description

Remove window event handler with custom callback node.

Parameters

node
Node node to execute callback on
type
String Event to listen for
id
String event id to remove from node

Return values

Void

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.addWindowStartEvent

Definition

Name
Util.Events.addWindowStartlEvent
Syntax
String = Util.Events.addWindowStartEvent( Node node, Function action );

Description

Add window start event (mousedown/touchstart) handler with custom callback node.

Parameters

node
Node node to execute callback on
action
Function function to execute on event

Return values

String event id, to be used if event needs to be cancelled.

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.removeWindowStartEvent

Definition

Name
Util.Events.removeWindowStartEvent
Syntax
Void = Util.Events.removeWindowStartEvent( Node node, String id );

Description

Remove window start event (mousedown/touchstart) handler with custom callback node.

Parameters

node
Node node to execute callback on
id
String event id to remove from node

Return values

Void

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.addWindowMoveEvent

Definition

Name
Util.Events.addWindowMoveEvent
Syntax
String = Util.Events.addWindowMoveEvent( Node node, Function action );

Description

Add window move event (touchmove/mousemove) handler with custom callback node.

Parameters

node
Node node to execute callback on
action
Function function to execute on event

Return values

String event id, to be used if event needs to be cancelled.

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.removeWindowMoveEvent

Definition

Name
Util.Events.removeWindowMoveEvent
Syntax
Void = Util.Events.removeWindowMoveEvent( Node node, String id );

Description

Remove window move event handler with custom callback node.

Parameters

node
Node node to execute callback on
id
String event id to remove from node

Return values

Void

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.addWindowEndEvent

Definition

Name
Util.Events.addWindowEndEvent
Syntax
String = Util.Events.addWindowEndEvent( Node node, Function action );

Description

Add window end event (touchend/mouseup) handler with custom callback node.

Parameters

node
Node node to execute callback on
action
Function function to execute on event

Return values

String event id, to be used if event needs to be cancelled.

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Util.Events.removeWindowEndEvent

Definition

Name
Util.Events.removeWindowEndEvent
Syntax
Void = Util.Events.removeWindowEndEvent( Node node, String id );

Description

Remove window end event handler with custom callback node.

Parameters

node
Node node to execute callback on
id
String event id to remove from node

Return values

Void

Examples

none

Dependencies

JavaScript
  • eval
Manipulator
  • Util.Events.addEvent
  • Util.Events.removeEvent
  • Util.randomString

Files

Main file

  • u-events-browser.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-events-browser.js + u-events.js + u-string.js
desktop_ie11
u-events-browser.js + u-events.js + u-string.js
desktop
u-events-browser.js + u-events.js + u-string.js
desktop_ie10
u-events-browser.js + u-events.js + u-string.js
desktop_ie9
u-events-browser.js + u-events.js + u-string.js
desktop_light
u-events-browser.js + u-events.js + u-events-desktop_light.js + u-string.js + u-string-desktop_light.js
tablet
u-events-browser.js + u-events.js + u-string.js
tablet_light
u-events-browser.js + u-events.js + u-string.js
smartphone
u-events-browser.js + u-events.js + u-string.js
mobile
not tested
mobile_light
not tested
tv
u-events-browser.js + u-events.js + u-events-desktop_light.js + u-string.js + u-string-desktop_light.js
seo
not supported