Namespace: Events:emit

Events:emit

Source:

Methods

emit(targets, events, payloadopt, nullable, EventConstructoropt, nullable, eventOptionsopt, nullable) → {Number}

Dispatches synthetic events on all given targets.

In contrast to "fire", this function actually dispatches bubbling events on the provided EventTargets. Delegations are resolved using "querySelectorAll". This function does not check actual handler presence using the event map, but blindly emits what has been given, purely using the DOM as the event bus. Handlers defined with "on" and "once" will of course still be triggered if hit, since they always also register a native event listener. The events emitted are purely synthetic basic Events and CustomEvents, lacking special properties, which, for example, MouseEvents provide. So, using "screenX" in the handler will not work. If you need a certain base class for the created events, use the "EventConstructor" to provide the base class and add special options via "eventOptions".

The definition of targets and events works almost as in "on" and "once", the only differences being, that we have no handler, and we cannot leave out the event name. Using a wildcard for the namespace will leave out the namespace in the created events.

Parameters:
Name Type Attributes Default Description
targets EventTarget | Array.<EventTarget>

the target(s) to dispatch events on
events String | Array.<String>

the event name(s) to emit, can be either a single name or a list of names, each name may also have a namespace, separated by a dot, to target all events/namespaces, you may use ""/".*"
payload Object <optional>
<nullable>
 null

a plain object payload to relay to the event handlers via the detail of the CustomEvent given to the handler as first parameter
EventConstructor function <optional>
<nullable>
 null

the default constructor is Event/CustomEvent, if you need another specific synthetic event, provide a constructor such as MouseEvent here
eventOptions Object <optional>
<nullable>
 null

use this plain object to provide constructor specific options to use in event construction, this should especially come in handy in case you provide a custom EventConstructor
Source:
See:
Throws:

  • error in case no targets are defined

  • error in case no events are defined

  • error in case targets are not all usable event targets

  • error in case delegations are missing viable ancestor targets

Returns:
the number of events actually dispatched by the function call, may also be 0 if nothing matched
Type
Number
Example
emit([buttonElement, ancestorElement, 'a'], 'click');
emit(linkElement, 'click.__default', {defaultClick: true});
emit([divElement, document.body], 'crash');
emit([ancestorElement, 'a'], 'click', {trackingId : 'abc123'});
emit([ancestorElement, '.btn[data-foobar="test"]'], 'click.delegated');
emit(ancestorElement, ['crash.test', 'crash.site'], {damage : 1000});
emit([ancestorElement, 'a', ancestorElement, '.btn[data-foobar="test"]'], 'click.delegated', null, null, {bubbles : false});
emit(buttonElement, 'click.*', {price : 666}, MouseEvent, {bubbles : false});