ember/template-no-inline-event-handlers

Disallows DOM event handler attributes in templates.

Inline event handlers like onclick="..." are an older pattern that should be replaced with the {{on}} modifier for better Ember integration and testability.

Rule Details

This rule disallows the use of inline DOM event handler attributes like onclick, onsubmit, etc.

Examples

Examples of incorrect code for this rule:

<template>
  <button onclick="alert('test')">Click</button>
</template>

<template>
  <div onmousedown="handleEvent()">Content</div>
</template>

<template>
  <form onsubmit="return false;">Form</form>
</template>

Examples of correct code for this rule:

<template>
  <button {{on "click" this.handleClick}}>Click</button>
</template>

<template>
  <input {{on "input" this.handleInput}} />
</template>

<template>
  <form {{on "submit" this.handleSubmit}}>Form</form>
</template>

Migration

Replace:

<button onclick="alert('clicked')">

With:

<button {{on "click" this.handleClick}}>

References

• Ember.js Guides - Event Handling
• eslint-plugin-ember template-no-inline-styles