no-element-event-actions.md

no-element-event-actions

Using HTML element event properties such as onclick for Ember actions is not recommended for the following reasons:

• It doesn't work for SVGs (since there is no onclick property of SVGElement).
• It can lead to confusing and unexpected behavior when mixed with normal action usage. For a comprehensive explanation of why, read Deep Dive on Ember Events.

The recommended alternative is the on modifier. on is available in Ember 3.11+ and by polyfill for earlier versions.

Examples

This rule forbids the following:

<button onclick={{action "submit"}}>Submit</button>

<button onclick={{this.myAction}}>Submit</button>

This rule allows the following:

<button {{on 'click' this.submit}}>Submit</button>

Configuration

The following values are valid configuration:

• boolean - true to enable / false to disable
• object -- An object with the following keys:
  • requireActionHelper -- Only apply this rule when the {{action}} helper is present (defaults to false)

References

• Documentation for template actions
• Polyfill for the on modifier (needed below Ember 3.11)
• Spec for the on modifier
• Spec for the action modifier
• List of DOM Events
• Deep Dive on Ember Events

Related Rules

• no-action
• no-action-modifiers