Ember Octane (3.22+) why use {{on 'click' this.function}} instead of onclick={{this.function}}

user_11370450 0
Viewed 224

So in Ember Octane there are two ways of attaching a function to an event in an hbs file.

The EmberJS way: {{on 'click' this.function}}

Classic HTML way: onclick={{this.function}}

Here they suggest using the prior syntax

However I don't see a reason why to use that syntax unless we have due reason to do so.

What are the reasons I would use the former over the latter?

ember-octane ember.js html javascript
1 Answers
{{on 'click' this.function}}

uses addEventListener semantics from W3C DOM 1.0 spec and automatically cleans itself up with removeEventListener when the template is destroyed.

onClick={{this.function}}

uses the older DOM event semantics from HTML4, which

  1. does not allow multiple listeners
  2. does not propagate to outside elements
  3. swallows any events from nested elements
user_2553760
Related