Aurelia delegate vs trigger：你怎么知道何时使用委托或触发？

Question

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

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

要了解event delegation是否可以与特定事件一起使用，请点击 mdn [event name] event 。实际上，在与mdn相关的任何与Google平台相关的Google平台搜索之前，通常会从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以外的元素点击活动。如果您在click等非输入元素上订阅div并且定位到iOS，请使用trigger绑定命令。 更多信息here和here。

Answer 2

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

在这种情况下，以下方法有效：

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