Origami Frontend Components & Services

JSDoc: ftdomdelegate

new Delegate(root)

DOM event delegator The delegator will listen for events that bubble up to the root node.

parameter type default description
root (optional) Node | string The root node or a selector string matching the root node

Methods

  • root(root) - (instance) Start listening for events on the provided DOM element
  • captureForType(eventType)
  • on(...) - (instance) Attach a handler to one event for all elements that match the selector, now or in the future The handler function receives three arguments: the DOM event object, the node that matched the selector while the event was bubbling and a reference to itself. Within the handler, 'this' is equal to the second argument. The node that actually received the event can be accessed via 'event.target'.
  • off(...) - (instance) Remove an event handler for elements that match the selector, forever
  • handle(event) - (instance) Handle an arbitrary event.
  • fire(...) - (instance) Fire a listener on a target.
  • destroy - (instance) Short hand for off() and root(), ie both with no parameters

Properties

  • listenerMap - (type: Object) Maintain a map of listener lists, keyed by event name.
  • handle - (type: function)
  • rootElement - (type: Node) The root node at which listeners are attached.

Links

matches

Global Property

Type

  • function

Check whether an element matches a generic selector.

Links

Delegate

Global Property

Links

matchesTag(tagName, element)

Global Function

Check whether an element matches a tag selector.

Tags are NOT case-sensitive, except in XML (and XML-based languages such as XHTML).

parameter type default description
tagName string The tag name to test against
element Element The element to test with

Returns

  • - boolean

Links

matchesRoot(selector, element)

Global Function

Check whether an element matches the root.

parameter type default description
selector String In this case this is always passed through as null and not used
element Element The element to test with

Returns

  • - boolean

Links

matchesId(id, element)

Global Function

Check whether the ID of the element in 'this' matches the given ID.

IDs are case-sensitive.

parameter type default description
id string The ID to test against
element Element The element to test with

Returns

  • - boolean

Links

Delegate#listenerMap

Instance Property

Type

  • Object

Maintain a map of listener lists, keyed by event name.

Links

Delegate#handle

Instance Property

Type

  • function

Links

Delegate#root(root)

Instance Method

Start listening for events on the provided DOM element

parameter type default description
root (optional) Node | string The root node or a selector string matching the root node

Returns

  • Delegate - This method is chainable

Links

Delegate#rootElement

Instance Property

Type

  • Node

The root node at which listeners are attached.

Links

Delegate#captureForType(eventType)

Instance Method

parameter type default description
eventType string

Returns

  • - boolean

Links

Delegate#on(...)

Instance Method

Attach a handler to one event for all elements that match the selector, now or in the future

The handler function receives three arguments: the DOM event object, the node that matched the selector while the event was bubbling and a reference to itself. Within the handler, 'this' is equal to the second argument.

The node that actually received the event can be accessed via 'event.target'.

parameter type default description
eventType string Listen for these events
selector string | undefined Only handle events on elements matching this selector, if undefined match root element
handler function Handler function - event data passed here will be in event.data
useCapture (optional) boolean see 'useCapture' in <https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener>

Returns

  • Delegate - This method is chainable

Links

Delegate#off(...)

Instance Method

Remove an event handler for elements that match the selector, forever

parameter type default description
eventType (optional) string Remove handlers for events matching this type, considering the other parameters
selector (optional) string If this parameter is omitted, only handlers which match the other two will be removed
handler (optional) function If this parameter is omitted, only handlers which match the previous two will be removed

Returns

  • Delegate - This method is chainable

Links

Delegate#handle(event)

Instance Method

Handle an arbitrary event.

parameter type default description
event Event

Links

Delegate#handle~EVENTIGNORE

Inner Property

Links

Delegate#fire(...)

Instance Method

Fire a listener on a target.

parameter type default description
event Event
target Node
listener Object

Returns

  • boolean

Links

Delegate#destroy

Instance Method

Short hand for off() and root(), ie both with no parameters

Returns

  • - void

Links

Switch component view

GitHub Repository

Install ftdomdelegate

If using the Build Service, add ftdomdelegate@^2.2.0 to your script tag.

If running a Manual Build, run bower install --save "ftdomdelegate@^2.2.0".

Help & Support

ftdomdelegate is maintained directly by the Origami team. If you have any questions about ftdomdelegate or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com