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

Question

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?

Answer 1

{{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