Aurelia 委托与触发器：您如何知道何时使用委托或触发器？

Question

我正在尝试学习如何使用 Aurelia 框架。这样做时，我正在阅读文档 here 关于他们绑定事件的方法。文档建议默认使用委托。我已经分叉了他们在其中一篇博客文章中提供的 plunkr，并在其中添加了一些内容。完整的 plunk 是here。

---

app.html

<template>
    <input value.bind="pageInput" blur.delegate="showAlert()" placeholder="delegate()" />
    <input value.bind="pageInput" blur.trigger="showAlert()" placeholder="trigger()" />

    <button type="button" click.delegate="showAlert()">delegate()</button>
    <button type="button" click.trigger="showAlert()">trigger()</button>
</template>

---

app.js

export class App {
  showAlert() {
    alert('showAlert()');
  }
}

---

正如您在 plunkr 中看到的，blur.trigger/click.delegate/click.trigger 都会触发事件，但 blur.delegate 不会。

为什么会这样？

您如何确定.delegate 何时不起作用（当然无需手动测试）？

Answer 1

使用delegate，除非您不能使用delegate。

事件委托是一种用于提高应用程序性能的技术。通过利用大多数 DOM 事件的“冒泡”特性，它大大减少了事件订阅的数量。通过事件委托，处理程序不会附加到单个元素。相反，单个事件处理程序附加到顶级节点，例如 body 元素。当一个事件冒泡到这个共享的顶级处理程序时，事件委托逻辑会根据事件的target 调用适当的处理程序。

要了解event delegation 是否可以用于特定事件，请谷歌mdn [event name] event。事实上，在任何与网络平台相关的谷歌搜索之前使用mdn 通常会从 Mozilla 开发者网络返回高质量的结果。进入活动的 MDN 页面后，检查活动是否为 bubbles。只有冒泡的事件才能与 Aurelia 的 delegate 绑定命令一起使用。 blur、focus、load 和 unload 事件不会冒泡，因此您需要使用 trigger 绑定命令来订阅这些事件。

这是MDN page for blur。它包含有关模糊和焦点事件的事件委托技术的更多信息。

上述一般指导的例外情况：

当满足以下条件时，在按钮上使用trigger：

1. 您需要禁用该按钮。
2. 按钮的内容由其他元素组成（而不仅仅是文本）。

这将确保对禁用按钮的子级的点击不会冒泡到委托事件处理程序。更多信息here.

在某些 iOS 用例中将trigger 用于click：

iOS 不会在 a、button、input 和 select 以外的元素上冒泡点击事件。如果您在 div 等非输入元素上订阅 click 并且针对 iOS，请使用 trigger 绑定命令。 更多信息here 和here。

Answer 2

关于这一点，如果 Aurelia 在捕获阶段侦听事件，则模糊委托将起作用，但这在 Aurelia 中是不可行的。如果有人可以提供一些提示如何在 Aurelia 中捕获事件会很有趣

在这种情况下，以下将起作用：

<template>
    <input blur.delegate-capture='showAlert()' />
</template>