Aurelia 委托与触发器:您如何知道何时使用委托或触发器? [英] Aurelia delegate vs trigger: how do you know when to use delegate or trigger?

问题描述

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

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)?

推荐答案

使用 delegate 除非你不能使用 delegate.

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

Use delegate except when you cannot use delegate.

Event delegation is a technique used to improve application performance. It drastically reduces the number of event subscriptions by leveraging the "bubbling" characteristic of most DOM events. With event delegation, handlers are not attached to individual elements. Instead, a single event handler is attached to a top-level node such as the body element. When an event bubbles up to this shared top-level handler the event delegation logic calls the appropriate handler based on the event's target.

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

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、button、input 和 select 之外的元素上冒泡点击事件.如果您在非输入元素(如 div)上订阅 click 并且面向 iOS，请使用 trigger 绑定命令.更多信息这里和这里.

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 委托与触发器:您如何知道何时使用委托或触发器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！