javascript - Aurelia 委托(delegate) vs 触发器 : how do you know when to use delegate or trigger?

Question

我正在努力学习如何使用 Aurelia 框架。这样做时，我正在阅读文档 here关于他们绑定(bind)事件的方法。该文档建议默认使用委托(delegate)。我已经 fork 了他们在他们的一篇博客文章中提供的 plunkr，并向其中添加了一点。完整的内容是 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。

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

找出是否event delegation可以与特定事件一起使用，google mdn [event name] event。事实上，在任何网络平台相关的谷歌搜索前加上 mdn 通常会返回来自 Mozilla Developer Network 的高质量结果。进入事件的 MDN 页面后，检查事件是否冒泡。只有冒泡的事件才能与 Aurelia 的 delegate 绑定(bind)命令一起使用。 blur、focus、load 和 unload 事件不会冒泡，因此您需要使用trigger 绑定(bind)命令订阅这些事件。

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

上述一般指南的异常(exception)情况:

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

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

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

在某些 iOS 用例中使用 trigger 进行 click:

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