奥里利亚代表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
绑定命令才能使用冒泡的事件。 blur
, focus
, load
和unload
事件不会冒泡,因此您需要使用trigger
绑定命令来订阅这些事件。
这里是模糊的MDN页面 。 它还有关于模糊和焦点事件的事件委托技术的更多信息。
上述一般指导的例外情况:
满足以下条件时,在button上使用trigger
:
- 您需要禁用该button。
- button的内容由其他元素组成(而不仅仅是文本)。
这将确保点击禁用button的孩子不会冒泡到委托事件处理程序。 更多信息在这里 。
在某些iOS使用情况下使用trigger
进行click
:
iOS不会触发a
, button
, input
和select
以外a
元素上的点击事件。 如果您订阅的是click
非input元素(如div
并定位到iOS,请使用trigger
binding命令。 更多信息在这里和这里 。
关于这一点,如果Aurelia在捕获阶段收听这个事件,模糊委托将会奏效,但这在Aurelia不是可行的。 如果有人能提供一些提示如何捕捉Aurelia中的事件,Wold会很有趣
在这种情况下,下面的工作:
<template> <input blur.delegate-capture='showAlert()' /> </template>