The on Modifier

The on modifier attaches a DOM listener to the element and cleans it up automatically when the element is destroyed.

4 min read Level 2/5 #ember#modifiers#dom

What you'll learn

Use the on modifier for click, input, and submit events
Pass arguments via the fn helper
Use modifier options like passive and once

{{on}} is the modern way to attach DOM listeners in Octane. It replaces the classic {{action}} helper and is just a thin wrapper over addEventListener — listeners are removed automatically on teardown.

Basic Usage

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

<input {{on "input" this.update}} />

<form {{on "submit" this.submit}}>
  <button type="submit">Go</button>
</form>

The handler is called with the native Event object. Inside it, this is the component thanks to @action.

Currying With fn

If you need to pass arguments, the fn helper partially applies them:

{{#each @items as |item|}}
  <button {{on "click" (fn this.toggle item)}}>
    {{item.label}}
  </button>
{{/each}}

Listener Options

The third argument is an options object — anything addEventListener accepts:

<a {{on "click" this.track passive=true}}>Logo</a>

<dialog {{on "close" this.afterClose once=true}}>...</dialog>

<div {{on "scroll" this.scroll capture=true}}>...</div>

Multiple Listeners

You can stack {{on}} on a single element — each one is independent:

<input
  {{on "focus" this.onFocus}}
  {{on "blur" this.onBlur}}
  {{on "input" this.onInput}}
/>

did-insert & Render Modifiers →