AMP 电子邮件中的操作和事件
重要：此文档不适用于你当前选择的格式网站！
本文档介绍 AMP 电子邮件格式的操作和事件。阅读 操作和事件，了解 AMP 网站、故事和广告。
on 属性用于在元素上安装事件处理程序。支持的事件取决于元素。
语法值是一种简单的特定于域的语言，格式为
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
请参阅下表，了解语法各部分的描述。
| 语法 | 是否必需？ | 描述 |
|---|---|---|
eventName | 是 | 这是元素公开的事件的名称。 |
targetId | 是 | 这是元素的 DOM id，或您希望响应事件执行操作的预定义特殊目标。在以下示例中，targetId 是 amp-lightbox 目标的 DOM id，即 photo-slides。 <amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Show Images</button> |
methodName | no | 这是针对具有默认操作的元素。 这是目标元素（由 AMP 有一个元素可以实现的默认操作的概念。因此，当省略 |
arg=value | no | 如果已记录，某些操作可能会接受参数。参数在 key=value 表示法中用括号定义。可接受的值是
|
处理多个事件
您可以通过用分号 ; 分隔事件来侦听元素上的多个事件。
示例：on="submit-success:lightbox1;submit-error:lightbox2"
针对一个事件的多个操作
您可以通过用逗号“,”分隔操作，为同一个事件按顺序执行多个操作。
示例：on="tap:target1.actionA,target2.actionB"
全局定义的事件和操作
AMP 在全局范围内定义了一个 tap 事件，您可以在任何 HTML 元素（包括 AMP 元素）上侦听该事件。
AMP 还全局定义了 hide、show 和 toggleVisibility 操作，您可以在任何 HTML 元素上触发这些操作。
只有当元素先前被 hide 或 toggleVisibility 操作隐藏，或使用 hidden 属性隐藏时，才能显示该元素。show 操作不支持被 CSS display:none 或 AMP 的 layout=nodisplay 隐藏的元素。
例如，在 AMP 中可以执行以下操作
<div id="warning-message">Warning...</div> <button on="tap:warning-message.hide">Cool, thanks!</button>
特定于元素的事件
* - 所有元素
| 事件 | 描述 |
|---|---|
tap | 当单击/轻触元素时触发。 |
输入元素
| 事件 | 描述 | 元素 | 数据 |
|---|---|---|---|
更改 | 当元素的值被更改并提交时触发。 数据属性镜像 HTMLInputElement 和 HTMLSelectElement 中的属性。 | 输入 | event.min event.max event.value event.valueAsNumber |
input[type="radio"],input[type="checkbox"] | event.checked | ||
选择 | event.min event.max event.value | ||
input-debounced | 当元素的值被更改时触发。这类似于标准的 change 事件，但仅在输入值停止更改 300 毫秒后触发。 | 触发 input 事件的元素。 | 与 change 事件数据相同。 |
input-throttled | 当元素的值被更改时触发。这类似于标准的 change 事件，但它被限制为在输入值更改时最多每 100 毫秒触发一次。 | 触发 input 事件的元素。 | 与 change 事件数据相同。 |
amp-accordion > section
| 事件 | 描述 | 数据 |
|---|---|---|
展开 | 当手风琴部分展开时触发。 | 无。 |
折叠 | 当手风琴部分折叠时触发。 | 无。 |
amp-carousel[type="slides"]
| 事件 | 描述 | 数据 |
|---|---|---|
幻灯片更改 | 当走马灯的当前幻灯片更改时触发。 | // Slide number. event.index |
amp-lightbox
| 事件 | 描述 | 数据 |
|---|---|---|
lightboxOpen | 当 Lightbox 完全可见时触发。 | 无 |
lightboxClose | 当 Lightbox 完全关闭时触发。 | 无 |
amp-list
| 事件 | 描述 | 数据 |
|---|---|---|
fetch-error(低信任) | 当获取数据失败时触发。 | 无 |
amp-selector
| 事件 | 描述 | 数据 |
|---|---|---|
选择 | 当选项被选中或取消选中时触发。 | // Target element's "option" attribute value. event.targetOption // Array of "option" attribute values of all selected elements. event.selectedOptions |
amp-sidebar
| 事件 | 描述 | 数据 |
|---|---|---|
sidebarOpen | 当侧边栏在过渡结束后完全打开时触发。 | 无 |
sidebarClose | 当侧边栏在过渡结束后完全关闭时触发。 | 无 |
amp-state
| 事件 | 描述 | 数据 |
|---|---|---|
fetch-error(低信任) | 当获取数据失败时触发。 | 无 |
表单
| 事件 | 描述 | 数据 |
|---|---|---|
提交 | 当表单被提交时触发。 | |
提交成功 | 当表单提交响应成功时触发。 | // Response JSON. event.response |
提交错误 | 当表单提交响应为错误时触发。 | // Response JSON. event.response |
有效 | 当表单有效时触发。 | |
无效 | 当表单无效时触发。 |
特定于元素的操作
*（所有元素）
| 操作 | 描述 |
|---|---|
隐藏 | 隐藏目标元素。 |
显示 | 显示目标元素。如果结果中autofocus元素变为可见，则该元素获得焦点。 |
切换可见性 | 切换目标元素的可见性。如果结果中autofocus元素变为可见，则该元素获得焦点。 |
切换类（class=STRING，force=BOOLEAN） | 切换目标元素的类。force是可选的，如果已定义，则确保如果设置为true，则只会添加类而不会删除类，如果设置为false，则只会删除类而不会添加类。 |
切换已选中（force=BOOLEAN） | 切换目标元素的选中状态。force是可选的，如果已定义，则确保结果状态与force的值相同。 |
聚焦 | 使目标元素获得焦点。要失去焦点，请聚焦到另一个元素（通常是父元素）。出于可访问性原因，我们强烈建议不要通过聚焦到body/documentElement来失去焦点。 |
amp-accordion
| 操作 | 描述 |
|---|---|
切换（section=STRING） | 切换amp-accordion部分的expanded和collapsed状态。当不带任何参数调用时，它会切换手风琴的所有部分。通过提供部分 ID 来触发特定部分：on="tap:myAccordion.toggle(section='section-id')"。 |
展开（section=STRING） | 展开手风琴的部分。如果某个部分已展开，则它保持展开状态。当不带任何参数调用时，它会展开手风琴的所有部分。通过提供部分 ID 来触发特定部分：on="tap:myAccordion.expand(section='section-id')"。 |
折叠（section=STRING） | 折叠手风琴的部分。如果某个部分已折叠，则它保持折叠状态。当不带任何参数调用时，它会折叠手风琴的所有部分。通过提供部分 ID 来触发特定部分：on="tap:myAccordion.collapse(section='section-id')"。 |
amp-carousel[type="slides"]
| 操作 | 描述 |
|---|---|
转到幻灯片（index=INTEGER） | 将旋转木马推进到指定的幻灯片索引。 |
amp-image-lightbox
| 操作 | 描述 |
|---|---|
打开（默认） | 使用触发操作的源图像打开图像灯箱。 |
amp-lightbox
| 操作 | 描述 |
|---|---|
打开（默认） | 打开灯箱。 |
关闭 | 关闭灯箱。 |
amp-list
| 操作 | 描述 |
|---|---|
changeToLayoutContainer | 将 amp-list 的布局更新为 layout="CONTAINER" 以允许 动态调整大小。 |
refresh | 从 src 刷新数据并重新呈现列表。 |
amp-selector
| 操作 | 描述 |
|---|---|
clear | 清除已定义 amp-selector 中的所有选择。 |
selectUp(delta=INTEGER) | 将选择向上移动 `delta` 的值。默认 `delta` 设置为 -1。如果未选择任何选项，则选定状态将变为最后一个选项的值。 |
selectDown(delta=INTEGER) | 将选择向下移动 `delta` 的值。默认 `delta` 设置为 1。如果未选择任何选项，则选定状态将变为第一个选项的值。 |
toggle(index=INTEGER, value=BOOLEAN) | 切换 `selected` 的应用。如果 select 属性不存在，则此操作会添加它。如果 select 属性存在，则此操作会移除它。您可以通过在 `value` 参数中包含布尔值来强制添加或移除。值 `true` 将强制添加 `selected` 属性，并且如果已存在，则不会移除它。值 `false` 将移除该属性，但如果不存在，则不会添加它。 |
amp-sidebar
| 操作 | 描述 |
|---|---|
打开（默认） | 打开侧边栏。 |
关闭 | 关闭侧边栏。 |
toggle | 切换侧边栏的状态。 |
form
| 操作 | 描述 |
|---|---|
clear | 清除表单输入中的所有值。 |
提交 | 提交表单。 |
特殊目标
以下是 AMP 系统提供的具有特殊要求的目标
目标：AMP
AMP 目标由 AMP 运行时提供，并实现适用于整个文档的顶级操作。
| 操作 | 描述 |
|---|---|
setState({foo: 'bar'})1 | 需要 amp-bind。 将对象文本合并到可绑定状态中。 |
1当与 多个操作一起使用时，后续操作将在调用之前等待 setState() 完成。每个事件只允许一个 setState()。