Ember Octane (3.22+) 为什么使用 {{on 'click' this.function}} 而不是 onclick={{this.function}}

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

所以在 Ember Octane 中有两种方法可以将函数附加到 hbs 文件中的事件。

EmberJS 方式：{{on 'click' this.function}}

经典HTML方式：onclick={{this.function}}

Here they suggest using the prior syntax

但是，除非我们有正当理由，否则我看不出为什么要使用该语法。

我使用前者而不是后者的原因是什么？

{{on 'click' this.function}}

使用来自 W3C DOM 1.0 规范的 addEventListener 语义，并在模板被销毁时使用 removeEventListener 自动清理自身。

onClick={{this.function}}

使用 HTML4 中较旧的 DOM 事件语义，

  1. 不允许多个监听器
  2. 不传播到外部元素
  3. 吞噬来自嵌套元素的任何事件