Edit this page

up.Layer up.Layer.prototype.on(types, [selector], [options], listener)
Instance method

Listens to a DOM event that originated on an element contained by this layer.

This will ignore events emitted on elements in descendant overlays, even if the descendant overlay's element is nested into the DOM tree of this layer.

The arguments for this function are the same as for up.on().

Example

let rootLayer = up.layer.root
let overlay = await up.layer.open()

rootLayer.on('foo', (event) => console.log('Listener called'))

rootLayer.emit('foo') // logs "Listener called"
overlay.emit('foo')   // listener is not called

Most Unpoly events have a layer reference

Whenever possible Unpoly will emit its events on associated layers instead of document. This way you can listen to events on one layer without receiving events from other layers.

E.g. to listen to all requests originating from a given layer:

let rootLayer = up.layer.root
let rootLink = rootLayer.affix('a[href=/foo]')

let overlay = await up.layer.open()
let overlayLink = overlay.affix('a[href=/bar]')

rootLayer.on('up:request:load', (event) => console.log('Listener called'))

up.follow(rootLink)    // logs "Listener called"
up.follow(overlayLink) // listener is not called

Observed events

types
required

The event types to bind to.

Multiple event types may be passed as either a space-separated string ('foo bar'), a comma-separated string ('foo, bar') or as an array of types (['foo', 'bar']).

stringArray<string>
[selector]
optional

The selector of an element on which the event must be triggered.

Omit the selector to listen to all events of the given type, regardless of the event target.

If the selector is not known in advance you may also pass a function that returns the selector. The function is evaluated every time an event with the given type is observed.

stringFunction():string

Listener

[options.passive=false]
optional

Whether to register a passive event listener.

A passive event listener may not call event.preventDefault(). This in particular may improve the frame rate when registering touchstart and touchmove events.

boolean
[options.once=true]
optional

Whether the listener should run at most once.

If true the listener will automatically be unbound after the first invocation.

boolean
[options.capture=false]
optional

Whether the listener should run before the event is emitted on the element.

See event capturing for more information about DOM event processing phases.

boolean
listener
required

The listener function that should be called.

The function takes the observed element as a second argument. The element's attached data is passed as a third argument.

Function(event, [element], [data])

Return value

A function that unbinds the event listeners when called.

Function()