Javascript Aurelia委托与触发器:您如何知道何时使用委托或触发器?

Javascript Aurelia委托与触发器:您如何知道何时使用委托或触发器?,javascript,aurelia,Javascript,Aurelia,我正在尝试学习如何使用Aurelia框架。在这样做的过程中,我阅读了有关他们绑定事件方法的文档。文档建议默认情况下使用委托。我已经将他们在一篇博客文章中提供的plunkr分叉,并添加了一点内容。完全的砰砰声是 app.html 代表() 触发器() app.js 导出类应用程序{ showarert(){ 警报('showAlert()'); } } 正如您在plunkr中看到的,blur.trigger/click.delegate/click.trigger会触发所有事件,但bl

我正在尝试学习如何使用Aurelia框架。在这样做的过程中,我阅读了有关他们绑定事件方法的文档。文档建议默认情况下使用委托。我已经将他们在一篇博客文章中提供的plunkr分叉,并添加了一点内容。完全的砰砰声是


app.html


代表()
触发器()

app.js

导出类应用程序{
showarert(){
警报('showAlert()');
}
}

正如您在plunkr中看到的,blur.trigger/click.delegate/click.trigger会触发所有事件,但blur.delegate不会

为什么会这样?

您如何确定
.delegate
何时不起作用(当然不需要手动测试)?

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

要了解是否可以与特定事件一起使用,请使用google
mdn[event name]event
。事实上,在任何与web平台相关的google搜索之前,使用
mdn
通常会从Mozilla开发者网络返回高质量的结果。进入事件的MDN页面后,检查事件是否出现气泡。只有冒泡的事件才能与Aurelia的
delegate
binding命令一起使用模糊、
聚焦
加载
卸载
事件不会冒泡,因此您需要使用
触发
绑定命令订阅这些事件。

这是我的建议。它有关于模糊和聚焦事件的事件委派技术的更多信息

上述一般指南的例外情况: 当满足以下条件时,使用
触发器
on按钮:
  • 你需要禁用这个按钮
  • 按钮的内容由其他元素组成(而不仅仅是文本)
  • 这将确保对禁用按钮的子项的单击不会冒泡到委托事件处理程序。更多信息

    使用
    触发器
    对于
    在某些iOS用例中单击
    : iOS不会在
    a
    按钮
    输入
    选择
    以外的元素上冒泡单击事件。如果您正在订阅
    单击非输入元素(如
    div
    )上的
    并以iOS为目标,请使用
    触发器
    绑定命令。
    更多信息和。

    关于此,如果Aurelia在捕获阶段侦听事件,则blur委托将起作用,但这在Aurelia中是不可行的。如果有人能提供一些关于如何捕捉奥雷利亚事件的提示,那将会很有趣

    在这种情况下,以下操作将起作用:

    <template>
        <input blur.delegate-capture='showAlert()' />
    </template>
    
    
    
    使用触发器的其他原因:如果您支持Internet Explorer,并且将按钮设置为禁用
    ,则需要将
    单击事件设置为
    触发器,而不是
    委托
    。如果使用
    delegate
    ,则当单击按钮时,
    click
    事件仍将激发,即使按钮已禁用。有关更多详细信息,请参阅本期:我不同意此处的文档。委托中存在触发器不存在的陷阱。我认为,对于大多数应用程序来说,禁用按钮意外触发事件或按钮完全无法在iOS上运行是比性能更大的问题,特别是当你谈论少数元素时。在一张有很多行的桌子上工作?仔细考虑代表。否则,使用trigger更安全。为什么建议使用trigger.click来设置元素上的光标:指针?气泡是什么意思?下面是一个原型,演示了如何将
    捕获
    绑定命令以及
    委托
    触发器
    添加到aurelia中:这是正式的吗?对于任何人来说,捕获绑定命令现在是正式内置的。语法是
    click.capture='expression'