操作和事件

AMP 采用交互式用户体验。但是，为了性能和用户体验保证，它与非 AMP 页面中的做法略有不同。

AMP 使用 on 属性在元素上安装事件处理程序。与属性类似，某些事件和操作可用于常见元素，而另一些事件和操作则特定于某些组件。对于我们的第一个页面，我们将注册一个基本事件（用户的点击），然后使用 hide 操作进行响应。

在您的页面中添加一个按钮，并赋予它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 撰写