Actions and events
AMP embraces interactive user experiences. But, for performance and user experience guarantees, it’s just done a bit differently than in non-AMP pages.
AMP uses the
on attribute to install event handlers on elements. Like attributes, some events and actions are available to common elements while others are special to certain components. For our first page, we’ll register a basic event, a user’s click, then respond with the hide action.
Add a button to your page, and give it the
<button on=""> Goodbye AMPHTML World! </button>
The first thing we’ll define in the
on attribute’s value is the event we’re listening for. For a user’s click via mouse on desktop or mobile touch, AMP uses the event type
Then, we add a colon character, then define the
id of the target we want our action to have an effect on. We’ll hide our
<h1 id="hello"> element, so let's add “hello” after the colon character.
Finally, we add a period, then define the action. In this case, it’s
Now, if we click our button the
<h1> element is hidden!
Written by @crystalonscript