XForms/事件概述
< XForms
您希望能够在表单执行的不同部分执行各种任务。
XForms 集成了 W3C XML 事件标准。此标准为表单生命周期中使用的大多数常见事件创建了标准名称。W3C 试图标准化这些事件及其事件标签，以便它们可以在所有供应商的浏览器中一致地使用。
以下是 XForms 事件的列表。一些事件与单个表单控件（例如 input、select 和 textarea）相关联，而另一些事件与表单内的模型相关联。
| 事件 | 取消 | 冒泡 | 目标 |
|---|---|---|---|
| 初始化事件 | |||
| xforms-model-construct | N | Y | <model> |
| xforms-model-construct-done | N | Y | <model> |
| xforms-ready | N | Y | <model> |
| xforms-model-destruct | N | N | <model> |
| 处理事件 | |||
| xforms-rebuild | Y | Y | <model> |
| xforms-recalculate | Y | Y | <model> |
| xforms-revalidate | Y | Y | <model> |
| xforms-refresh | Y | Y | <model> |
| 交互事件 | |||
| xforms-previous | Y | N | <control> |
| xforms-next | Y | N | <control> |
| xforms-focus | Y | N | <control> |
| xforms-help | Y | Y | <control> |
| xforms-hint | Y | Y | <control> |
| xforms-reset | Y | Y | <model> |
| xforms-submit | Y | Y | <submission> |
| DOMActivate | Y | Y | <control> |
| 通知事件 | |||
| DOMFocusIn | N | Y | <control> |
| DOMFocusOut | N | Y | <control> |
| xforms-value-changed | N | Y | <control> |
| xforms-select | N | Y | <item>，<case> 或 <itemset> |
| xforms-deselect | N | Y | <item>，<case> 或 <itemset> |
| xforms-scroll-first | N | Y | <repeat> |
| xforms-scroll-last | N | Y | <repeat> |
| xforms-insert | N | Y | <instance> |
| xforms-delete | N | Y | <instance> |
| xforms-valid | N | Y | <control> |
| xforms-invalid | N | Y | <control> |
| xforms-in-range | N | Y | <control> |
| xforms-out-of-range | N | Y | <control> |
| xforms-readonly | N | Y | <control> |
| xforms-readwrite | N | Y | <control> |
| xforms-required | N | Y | <control> |
| xforms-optional | N | Y | <control> |
| xforms-enabled | N | Y | <control> |
| xforms-disabled | N | Y | <control> |
| xforms-submit-done | N | Y | <submission> |
| xforms-submit-error | N | Y | <submission> |
| 错误通知 | |||
| xforms-binding-exception | N | Y | <bind> |
| xforms-link-exception | N | Y | <model> |
| xforms-link-error | N | Y | <model> |
| xforms-compute-exception | N | Y | <model> |
了解事件如何触发的最佳方法之一是将它们写入日志实例并在表单底部显示日志。您可以在构建和调试表单时执行此日志记录。
将以下实例添加到您的模型中
<xf:instance xmlns="" id="log">
<events>
<event>log initialized</event>
</events>
</xf:instance>
每当您想查看事件时，只需添加一个操作将事件附加到日志的末尾即可
<xf:action ev:event="xforms-deselect">
<xf:insert nodeset="instance('log')/event" at="last()" position="after" />
<xf:setvalue ref="instance('log')/event[last()]" value="'Tab One deselected'" />
</xf:action>
请注意，消息必须位于双引号内的单引号内。
在表单的末尾，您可以通过将输出包含在重复项内来显示来自日志实例的数据。
<div id="event-log">
<xf:repeat nodeset="instance('log')/event" class="log">
<xf:output ref="." />
</xf:repeat>
</div>
您还可以使用以下方法设置事件日志的样式
#event-log {
color: DarkGray;
background-color: Lavender;
}