`{{on}}`

Attaches a DOM event listener to an element.

Since Ember 4/5 (Octane) Spec ↗

Syntax

{{on "eventName" this.handler}}

Returns

modifier — An element modifier registering the listener.

Examples

<button type="button" {{on "click" this.save}}>Save</button>

<input
  {{on "input" this.handleInput}}
  {{on "blur" this.validate}}
/>

Notes

{{on}} is the modern replacement for the {{action}} modifier. Pass capture/once/passive via options: {{on "scroll" this.fn passive=true}}. The handler should be an @action so `this` is bound.