操作和事件

AMP 致力于交互式的用户体验。但是，为了保证性能和用户体验，它的实现方式与非 AMP 页面略有不同。

AMP 使用 on 属性在元素上安装事件处理程序。与属性一样，一些事件和操作可用于通用元素，而另一些则专门用于某些组件。对于我们的第一个页面，我们将注册一个基本事件，即用户的点击，然后使用隐藏操作进行响应。

将按钮添加到您的页面，并为其指定 on 属性

<button on="">
    Goodbye AMPHTML World!
</button>

我们将在 on 属性的值中定义的第一个内容是我们正在侦听的事件。对于用户通过桌面鼠标或移动触摸进行的点击，AMP 使用事件类型 tap。

<button on="tap">

然后，我们添加一个冒号字符，然后定义要使我们的操作产生影响的目标的 id。我们将隐藏我们的 <h1 id="hello"> 元素，因此在冒号字符后添加 “hello”。

<button on="tap:hello">

最后，我们添加一个句点，然后定义操作。在这种情况下，它是 hide。

<button on="tap:hello.hide">

现在，如果我们单击我们的按钮，<h1> 元素就会被隐藏！

交互选项

请阅读操作和事件以及我们的交互指南，了解有关 AMP 中可用的交互类型以及如何实现它们的更多详细信息。此外，AMP 通过 <amp-script> 组件支持自定义 JavaScript。请阅读在 AMP 页面中使用自定义 JavaScript 指南，并按照 使用自定义 JavaScript 创建 UI 小部件进行入门。

• 撰写者： @crystalonscript