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;
}