奥里利亚代表vs触发器:你怎么知道何时使用委托或触发器?

我正在努力学习如何使用Aurelia框架。 在这样做的时候,我正在阅读关于绑定事件方法的文档。 文档build议默认使用委托。 我已经在他们的博客文章中提供了他们提供的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不会工作(当然没有手动testing)?

任何帮助将不胜感激!

使用delegate除非不能使用delegate

事件委托是一种用于提高应用程序性能的技术。 通过利用大多数DOM事件的“冒泡”特性,它大大减less了事件订阅的数量。 随着事件的委托,处理程序不附加到个别元素。 而是将单个事件处理程序附加到顶层节点(如body元素)。 当一个事件冒泡到这个共享的顶级处理程序时,事件委托逻辑会根据事件的目标来调用适当的处理程序。

要了解事件代表团是否可以与特定事件一起使用,请使用google mdn [event name] event 。 事实上,在任何networking平台之前,与mdn谷歌search往往会从Mozilla开发者networking返回高质量的结果。 一旦你在事件的MDN页面上,检查事件是否bubbles 。 只有Aurelia的delegate绑定命令才能使用冒泡的事件。 blurfocusloadunload事件不会冒泡,因此您需要使用trigger绑定命令来订阅这些事件。

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

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

满足以下条件时,在button上使用trigger

  1. 您需要禁用该button。
  2. button的内容由其他元素组成(而不仅仅是文本)。

这将确保点击禁用button的孩子不会冒泡到委托事件处理程序。 更多信息在这里 。

在某些iOS使用情况下使用trigger进行click

iOS不会触发abuttoninputselect以外a元素上的点击事件。 如果您订阅的是click非input元素(如div并定位到iOS,请使用trigger binding命令。 更多信息在这里和这里 。

关于这一点,如果Aurelia在捕获阶段收听这个事件,模糊委托将会奏效,但这在Aurelia不是可行的。 如果有人能提供一些提示如何捕捉Aurelia中的事件,Wold会很有趣

在这种情况下,下面的工作:

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