Aurelia委托vs触发器:你如何知道何时使用委托或触发器

Aurelia delegate vs trigger: how do you know when to use delegate or trigger?

本文关键字：触发器 何时使 何知道 委托 vs Aurelia      更新时间：2023-09-26

我正在努力学习如何使用Aurelia框架。在这样做的过程中，我阅读了这里关于绑定事件方法的文档。文档建议在默认情况下使用delegate。我已经分叉了他们在一篇博客文章中提供的plunkr，并添加了一点。完整的plunk在这里。

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何时不起作用（当然不需要手动测试）

除非不能使用delegate，否则请使用delegate

事件委派是一种用于提高应用程序性能的技术。它通过利用"；冒泡"；大多数DOM事件的特征。使用事件委派，处理程序不会附加到单个元素。相反，将单个事件处理程序附加到顶级节点（如body元素）。当事件冒泡到此共享顶级处理程序时，事件委派逻辑会根据事件的目标调用适当的处理程序。

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

这是模糊的MDN页面。它有关于模糊和焦点事件的事件委派技术的进一步信息。

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

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

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

这将确保对禁用按钮的子项的单击不会冒泡到委托事件处理程序中。点击此处了解更多信息。

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

iOS不会在a、button、input和select以外的元素上设置气泡点击事件。如果您在非输入元素（如div）上订阅click，并且目标是iOS，请使用trigger绑定命令。更多信息请点击此处。

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

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

<template>
    <input blur.delegate-capture='showAlert()' />
</template>
相关文章：