Javascript Aurelia 委托与触发器：您如何知道何时使用委托或触发器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33904248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aurelia delegate vs trigger: how do you know when to use delegate or trigger?
提问by peinearydevelopment
I'm trying to learn how to work with the Aurelia framework. In doing so, I was reading the documentation hereregarding 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.
我正在尝试学习如何使用 Aurelia 框架。这样做，我读的文档在这里对他们的结合事件的方法。文档建议默认使用委托。我已经分叉了他们在一篇博客文章中提供的 plunkr 并添加了一点。完整版在这里。
app.html
应用程序.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
应用程序.js
export class App {
showAlert() {
alert('showAlert()');
}
}
As you can see in the plunkr, the blur.trigger/click.delegate/click.triggerall fire the event, but blur.delegatedoesn't.
正如您在 plunkr 中看到的，blur.trigger/click.delegate/click.trigger都会触发事件，但blur.delegate不会。
Why is this the case?
为什么会这样？
How can you determine when .delegateisn't going to work(without manually testing it of course)?
你怎么能确定什么时候.delegate不工作（当然没有手动测试）？
回答by Jeremy Danyow
Use delegateexcept when you cannot use delegate.
delegate除非您不能使用，否则请使用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.
事件委托是一种用于提高应用程序性能的技术。通过利用大多数 DOM 事件的“冒泡”特性，它大大减少了事件订阅的数量。使用事件委托，处理程序不会附加到单个元素。相反，单个事件处理程序附加到顶级节点，例如 body 元素。当一个事件冒泡到这个共享的顶级处理程序时，事件委托逻辑会根据事件的目标调用适当的处理程序。
To find out if event delegationcan be used with a particular event, google mdn [event name] event. In fact, preceding any web platform related google search with mdnoften 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 delegatebinding command. The blur, focus, loadand unloadevents do not bubble so you'll need to use the triggerbinding command to subscribe to these events.
要了解事件委托是否可用于特定事件，请访问 google mdn [event name] event. 事实上，在任何与网络平台相关的谷歌搜索之前，mdn通常会从 Mozilla 开发者网络返回高质量的结果。进入活动的 MDN 页面后，检查活动bubbles. 只有冒泡的事件才能与 Aurelia 的delegate绑定命令一起使用。的blur，focus，load和unload事件不冒泡，所以你需要使用trigger绑定命令来订阅这些事件。
Here's the MDN page for blur. It has further info on event delegation techniques for the blur and focus events.
这是blur的MDN 页面。它有关于模糊和焦点事件的事件委托技术的更多信息。
Exceptions to the general guidance above:
上述一般指南的例外情况：
Use triggeron buttons when the following conditions are met:
trigger满足以下条件时使用on 按钮：
- You need to disable the button.
- The button's content is made up of other elements (as opposed to just text).
- 您需要禁用该按钮。
- 按钮的内容由其他元素组成（而不仅仅是文本）。
This will ensure clicks on disabled button's children won't bubble up to the delegate event handler. More info here.
这将确保单击禁用按钮的子项不会冒泡到委托事件处理程序。更多信息在这里。
Use triggerfor clickin certain iOS use-cases:
使用trigger了click在某些iOS的用例：
iOS does not bubble click events on elements other than a, button, inputand select. If you're subscribing to clickon a non-input element like a divand are targeting iOS, use the triggerbinding command.
More info hereand here.
iOS版确实比上其他元素不泡点击事件a，button，input和select。如果您订阅click非输入元素，例如 adiv并且面向 iOS，请使用triggerbinding 命令。更多信息在这里和这里。
回答by bigopon
Regarding to this, blur delegate would work if Aurelia listens to the event in capture phase, but this is not doable atm in Aurelia. Wold be interesting if someone could provide some hint how to capture event in Aurelia
对此，如果 Aurelia 在捕获阶段侦听事件，则模糊委托将起作用，但这在 Aurelia 中是不可行的。如果有人可以提供一些关于如何在 Aurelia 中捕获事件的提示，那将会很有趣
In that case, following will work:
在这种情况下，以下将起作用：
<template>
<input blur.delegate-capture='showAlert()' />
</template>
