Aurelia 委托与触发器：您如何知道何时使用委托或触发器？

IT技术 javascript aurelia

2021-02-23 16:26:31

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

应用程序.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>

应用程序.js

export class App {
  showAlert() {
    alert('showAlert()');
  }
}

正如您在 plunkr 中看到的，blur.trigger/click.delegate/click.trigger都会触发事件，但blur.delegate不会。

为什么会这样？

你怎么能确定什么时候.delegate不工作（当然没有手动测试）？

2个回答

`delegate`除非您不能使用，否则请使用`delegate`。

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

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

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

上述一般指南的例外情况：

`trigger`满足以下条件时使用on 按钮：

您需要禁用该按钮。
按钮的内容由其他元素组成（而不仅仅是文本）。

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

使用`trigger`了`click`在某些iOS的用例：

iOS版确实比上其他元素不泡点击事件a，button，input和select。如果您订阅click非输入元素，例如 adiv并且面向 iOS，请使用triggerbinding 命令。更多信息在这里和这里。

使用触发器的其他原因：如果您支持 Internet Explorer 并将按钮设置为disabled，那么您需要将click事件设为trigger，而不是delegate。如果您使用delegate，则click即使按钮被禁用，单击按钮时仍会触发该事件。有关更多详细信息，请参阅此问题：github.com/aurelia/binding/issues/163

2021-04-22 16:26:31

什么bubbles意思？stackoverflow.com/questions/4616694/...

2021-04-24 16:26:31

我不同意这里的文档。有触发器不存在的委托问题。我认为，对于大多数应用程序而言，禁用按钮意外触发事件或按钮完全无法在 iOS 上运行是一个比 perf 更大的问题，尤其是当您谈论少数元素时。在有大量行的表上工作？仔细考虑委托。否则，使用触发器更安全。

2021-05-09 16:26:31

为什么推荐 trigger.click 而不是设置 cursor: 元素上的指针？

2021-05-14 16:26:31

对此，如果 Aurelia 在捕获阶段侦听事件，则模糊委托将起作用，但这在 Aurelia 中是不可行的。如果有人可以提供一些如何在 Aurelia 中捕获事件的提示，那将会很有趣

在这种情况下，以下将起作用：

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

对于任何遇到这个问题的人，捕获绑定命令现在是官方内置的。语法是 click.capture='expression'

2021-04-21 16:26:31

这是capture绑定命令如何配合delegate并trigger可能添加到aurelia 的原型：gist.run/?id=196c99652a28d571527a8fff63297308

2021-04-28 16:26:31

这是在正式发布的路上吗？

2021-05-19 16:26:31

其它你可能感兴趣的问题

上一篇禁用选项卡焦点在表单元素上下一篇创建带有搜索选项的选择框

Aurelia 委托与触发器：您如何知道何时使用委托或触发器？

delegate除非您不能使用，否则请使用delegate。

上述一般指南的例外情况：

trigger满足以下条件时使用on 按钮：

使用trigger了click在某些iOS的用例：

`delegate`除非您不能使用，否则请使用`delegate`。

`trigger`满足以下条件时使用on 按钮：

使用`trigger`了`click`在某些iOS的用例：