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

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?

"_Classic HTML way_" is too classic, it's outdated and potentially dangerous. — Teemu, Oct 30 '20 at 16:20
Hey, I appreciate the response. Can you give me an explanation or link me to some articles explaining why? — Abe, Oct 30 '20 at 16:22
[Here's some points](https://stackoverflow.com/a/63119431/1169519) why to avoid inline listeners. "_Potentially dangerous_" means a possible workaround of [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), as you can't `nonce` mark inline handlers, or evaluate them as secure in general. — Teemu, Oct 30 '20 at 18:12

score 7 · Accepted Answer · answered Oct 30 '20 at 17:35

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