動作與事件

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