---
name: "up.layer.on"
area: "API"
kind: "JavaScript function"
parent: "up.layer module"
url: "https://unpoly.com/api/up.layer.on"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.layer module](https://unpoly.com/api/up.layer.md)</nav>

# up.layer.on(types, [selector], [options], listener)

Listens to a [DOM event](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events) that originated on an element [contained](https://unpoly.com/api/up.Layer.prototype.contains.md) by the [current layer](https://unpoly.com/api/up.layer.current.md).

This is a shortcut for `up.layer.current.on()`. See [`up.Layer#on()`](https://unpoly.com/api/up.Layer.prototype.on.md) for more documentation.

---

## Parameters {#parameters}

### Observed events {#parameters-observed-events}

#### types {#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']`).

Type: string | [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<string>

#### [selector] {#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.

Type: string | Function():string

### Listener {#parameters-listener}

#### [options.passive=false] {#options.passive}

(optional)

Whether to register a [passive event listener](https://developers.google.com/web/updates/2016/06/passive-event-listeners).

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

Type: boolean

#### [options.once=false] {#options.once}

(optional)

Whether the listener should run at most once.

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

Type: boolean

#### [options.capture=false] {#options.capture}

(optional)

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

See [event capturing](https://javascript.info/bubbling-and-capturing#capturing) for more information about DOM event processing phases.

Type: boolean

#### listener {#listener}

(required)

The listener function that should be called.

The function takes the observed element as a second argument. The element's [attached data](https://unpoly.com/learn/data.md) is passed as a third argument.

Type: Function(event, [element], [[data](https://unpoly.com/learn/data.md)])

---

## Return value {#return-value}

A function that unbinds the event listeners when called.

Type: Function()