Aurelia delegate vs trigger：你怎么知道何时使用委托或触发器？ [英] Aurelia delegate vs trigger: how do you know when to use delegate or trigger?

问题描述

我正在努力学习如何使用Aurelia框架。在这样做时，我正在阅读文档这里关于他们绑定事件的方法。文档建议默认使用委托。我已经在他们的一篇博客文章中提供了他们提供的插件，并添加了一点。完整的插件是这里。

I'm trying to learn how to work with the Aurelia framework. In doing so, I was reading the documentation here regarding their method of binding events. The documentation suggests using delegate by default. I have forked the plunkr that they provided in one of their blog posts and added a little bit to it. The full plunk is 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 却没有。

---

As you can see in the plunkr, the blur.trigger/click.delegate/click.trigger all fire the event, but blur.delegate doesn't.

为什么会这样？

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

How can you determine when .delegate isn't going to work(without manually testing it of course)?

推荐答案

使用委托除非您不能使用委托。

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

了解事件委派可以与特定事件一起使用，google mdn [事件名称]事件 。事实上，在与 mdn 相关的任何网络平台相关谷歌搜索之前，往往会从Mozilla开发者网络返回高质量的结果。进入活动的MDN页面后，检查活动 bubbles 。只有冒泡的事件才能与Aurelia的委托绑定命令一起使用。 模糊，焦点，加载和卸载事件不会冒泡，因此您需要使用触发器绑定命令来订阅这些事件。

To find out if event delegation can be used with a particular event, google mdn [event name] event. In fact, preceding any web platform related google search with mdn often returns a high quality result from the Mozilla Developer Network. Once you're on the event's MDN page, check whether the event bubbles. Only events that bubble can be used with Aurelia's delegate binding command. The blur, focus, load and unload events do not bubble so you'll need to use the trigger binding command to subscribe to these events.

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

Here's the MDN page for blur. It has further info on event delegation techniques for the blur and focus events.

1. 您需要禁用按钮。


2. 按钮的内容由其他元素组成（而不仅仅是文本）。

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

This will ensure clicks on disabled button's children won't bubble up to the delegate event handler. More info here.

iOS不支持在 a ，按钮，输入和选择。如果您订阅在非输入元素（例如 div ）上点击并且定位到iOS，请使用触发器绑定命令。
更多信息此处和这里。

iOS does not bubble click events on elements other than a, button, input and select. If you're subscribing to click on a non-input element like a div and are targeting iOS, use the trigger binding command. More info here and here.

这篇关于Aurelia delegate vs trigger：你怎么知道何时使用委托或触发器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！