Aurelia delegate vs trigger:你怎么知道何时使用委托或触发器？

Question

我正在努力学习如何使用Aurelia框架.这样做,我读的文档在这里对他们的结合事件的方法.文档建议默认使用委托.我已经在他们的一篇博客文章中提供了他们提供的插件,并添加了一点.完整的插件就在这里.

---

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不起作用(当然没有手动测试)？

Answer 1

delegate除非您不能使用,否则请使用delegate.

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

要确定事件委派是否可以与特定事件一起使用,请使用Google mdn [event name] event.实际上,在任何与谷歌平台相关的谷歌搜索之前,mdn往往会从Mozilla开发者网络返回高质量的结果.进入活动的MDN页面后,检查是否有活动bubbles.只有冒泡的事件才能与Aurelia的delegate绑定命令一起使用.的blur,focus,load和unload事件不冒泡,所以你需要使用trigger绑定命令来订阅这些事件.

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

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

trigger满足以下条件时在按钮上使用:

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

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

使用trigger了click在某些iOS的使用情况:

iOS不会在除a和button,input和之外的元素上冒泡点击事件select.如果您正在订阅click非输入元素(如a)div并且目标是iOS,请使用triggerbinding命令.更多信息在这里和这里.