動作與事件

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