動作與事件

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