npmpackage.info

Gathering detailed insights and metrics for ember-on-modifier

Other packages similar to ember-on-modifier

ember-on-resize-modifier

2.0.2

Modifier relying on a single ResizeObserver instance for better performance.

ember-event-helpers

0.1.1

Complimentary event template helpers to the {{on}} modifier

ember-on-modifier-sugar

0.0.2

Syntax sugar for simple on modifier usecases

@twyr/ember-event-modifiers

1.0.5

Ember modifiers for detecting events not on the element, and in the capture phase

Gathering detailed insights and metrics for ember-on-modifier

ember-on-modifier - 1.0.1 | npmpackage.info

ember-on-modifier

Implements the `{{on eventName this.someAction}}` element modifier from https://github.com/emberjs/rfcs/blob/master/text/0471-on-modifier.md

1.0.1

MIT

JavaScript

2.5

Installations

npm install ember-on-modifier

Developer Guide

BETA

Typescript

No

Module System

N/A

Min. Node Version

8.* || >= 10.*

Node Version

13.12.0

NPM Version

6.14.4 Pull Requests

Open

39

Total

346

Closed

144

Merged

163

Issues

Open

2

Total

17

Closed

15

Releases

v1.0.1

Updated on Apr 16, 2020

v1.0.0

Updated on Jul 13, 2019

v0.12.4

Updated on Jun 07, 2019

v0.12.3

Updated on Jun 07, 2019

v0.12.2

Updated on Apr 29, 2019

v0.12.1

Updated on Apr 20, 2019

View All 11 releases

Languages

JavaScript

HTML

Handlebars

JavaScript (95.3%)

HTML (4.57%)

Handlebars (0.13%)

Developer

buschtoens

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

37 Stars

282 Commits

6 Forks

2 Watchers

41 Branches

8 Contributors

Updated on Jul 01, 2025

Maintainers

View All 8 Contributors

Package Meta Information

Latest Version

1.0.1

Package Id

ember-on-modifier@1.0.1

Size

129.50 kB

NPM Version

6.14.4

Node Version

13.12.0

Published on

Apr 16, 2020

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

ember-on-modifier

A polyfill for the {{on}} element modifier specified by RFC #471 "{{on}} modifier".

Installation

ember install ember-on-modifier

Compatibility

Completely inert when running ember-source 3.11 or higher
Tested against ember-source v2.13, v2.18, v3.4 in CI

Usage

1<button {{on "click" this.onClick}}>
2  Click me baby, one more time!
3</button>

1import Component from '@ember/component';
2import { action } from '@ember-decorators/object';
3
4export default class BritneySpearsComponent extends Component {
5  @action
6  onClick(event: MouseEvent) {
7    console.log('I must confess, I still believe.');
8  }
9}

The @action decorator is used to bind the onClick method to the component instance.

This is essentially equivalent to:

1didInsertElement() {
2  super.didInsertElement();
3
4  const button = this.element.querySelector('button');
5  button.addEventListener('click', this.onClick);
6}

In addition to the above {{on}} will properly tear down the event listener, when the element is removed from the DOM. It will also re-register the event listener, if any of the passed parameters change.

Listening to Multiple Events

You can use the {{on}} modifier multiple times on the same element, even for the same event.

1<button
2  {{on "click" this.onClick}}
3  {{on "click" this.anotherOnClick}}
4  {{on "mouseover" this.onMouseEnter}}
5>
6  Click me baby, one more time!
7</button>

Event Options

All named parameters will be passed through to addEventListener as the third parameter, the options hash.

1<div {{on "scroll" this.onScroll passive=true}}>
2  Lorem Ipsum ...
3</div>

This is essentially equivalent to:

1didInsertElement() {
2  super.didInsertElement();
3
4  const div = this.element.querySelector('div');
5  div.addEventListener('scroll', this.onScroll, { passive: true });
6}

`once`

To fire an event listener only once, you can pass the once option:

1<button
2  {{on "click" this.clickOnlyTheFirstTime once=true}}
3  {{on "click" this.clickEveryTime}}
4>
5  Click me baby, one more time!
6</button>

clickOnlyTheFirstTime will only be fired the first time the button is clicked. clickEveryTime is fired every time the button is clicked, including the first time.

`capture`

To listen for an event during the capture phase already, use the capture option:

1<div {{on "click" this.triggeredFirst capture=true}}>
2  <button {{on "click" this.triggeredLast}}>
3    Click me baby, one more time!
4  </button>
5</div>

`passive`

If true, you promise to not call event.preventDefault(). This allows the browser to optimize the processing of this event and not block the UI thread. This prevent scroll jank.

If you still call event.preventDefault(), an assertion will be raised.

1<div {{on "scroll" this.trackScrollPosition passive=true}}>
2  Lorem ipsum...
3</div>

Internet Explorer 11 Support

Internet Explorer 11 has a buggy and incomplete implementation of addEventListener: It does not accept an options parameter and sometimes even throws a cryptic error when passing options.

This is why this addon ships a tiny ponyfill for addEventLisener that is used internally to emulate the once, capture and passive option. This means that all currently known options are polyfilled, so that you can rely on them in your logic.

Currying / Partial Application

If you want to curry the function call / partially apply arguments, you can do so using the {{fn}} helper:

1{{#each this.users as |user|}}
2  <button {{on "click" (fn this.deleteUser user)}}>
3    Delete {{user.name}}
4  </button>
5{{/each}}

1import Component from '@ember/component';
2import { action } from '@ember-decorators/object';
3
4interface User {
5  name: string;
6}
7
8export default class UserListComponent extends Component {
9  users: User[] = [{ name: 'Tom Dale' }, { name: 'Yehuda Katz' }];
10
11  @action
12  deleteUser(user: User, event: MouseEvent) {
13    event.preventDefault();
14    this.users.removeObject(user);
15  }
16}

`preventDefault` / `stopPropagation` / `stopImmediatePropagation`

The old {{action}} modifier used to allow easily calling event.preventDefault() like so:

1<a href="/" {{action this.someAction preventDefault=true}}>Click me</a>

You also could easily call event.stopPropagation() to avoid bubbling like so:

1<a href="/" {{action this.someAction bubbles=false}}>Click me</a>

You can still do this using ember-event-helpers:

1<a href="/" {{on "click" (prevent-default this.someAction)}}>Click me</a>

1<a href="/" {{on "click" (stop-propagation this.someAction)}}>Click me</a>

Related Projects

ember-on-helper: A complimentary {{on} template helper that accepts arbitrary event targets.
```
1{{on eventTarget eventName eventListener}}
```
Also ships with two convenience helpers for adding event listeners to document and window:
```
1{{on-document eventName eventListener}}
2{{on-window eventName eventListener}}
```

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

74 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-gxr4-xjj5-5px2
Warn: Project is vulnerable to: GHSA-jpcq-cgw6-v4j6
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-pc58-wgmc-hfjr
Warn: Project is vulnerable to: GHSA-vvv8-xw5f-3f88
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-xfhp-gmh8-r8v2
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg

Score

2.5

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to ember-on-modifier

Other packages similar to ember-on-modifier

ember-on-modifier

Installations

Developer Guide

No

N/A

8.* || >= 10.*

13.12.0

6.14.4

Pull Requests

39

346

144

163

Issues

2

17

15

Releases

Languages

Developer

buschtoens

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

ember-on-modifier

Installation

Compatibility

Usage

Listening to Multiple Events

Event Options

once

capture

passive

Internet Explorer 11 Support

Currying / Partial Application

preventDefault / stopPropagation / stopImmediatePropagation

Related Projects

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10

`once`

`capture`

`passive`

`preventDefault` / `stopPropagation` / `stopImmediatePropagation`