Packt+ | Advance your knowledge in tech

You're reading from AMP: Building Accelerated Mobile Pages Create lightning-fast mobile pages by leveraging AMP technology

Product type Paperback

Published in Oct 2017

Publisher Packt

ISBN-13 9781786467317

Length 370 pages

Edition 1st Edition

Languages

JavaScript

Tools

AMP

Concepts

Web Design

Author (1):

O'Donoghue

View More author details

Table of Contents (24) Chapters

Title Page

Credits

About the Author

Acknowledgements

About the Reviewer

www.Packtpub.com

Customer Feedback

Preface

1. Ride the Lightning with AMP FREE CHAPTER

2. Building Your First AMP Page

3. Making an Impression - Layout and Page Design in AMP

4. Engaging Users with Interactive AMP Components

5. Building Rich Media Pages in AMP

6. Making Contact - Forms in AMP

7. Dynamic Content and Data-Driven Interaction

8. Programming in AMP - amp-bind

9. When AMP Is Not Enough - Enter the iframe

10. Ads and Analytics in AMP

11. AMP Deployment and Your Web Presence

12. AMP - Where It's At and Where It's Going

13. AMP Components

14. Actions and Events

15. amp-bind Whitelisted Functions

JavaScript whitelisted functions

16. amp-bind Permitted Attribute Bindings

The Action and Event model in AMP

Earlier, we had our first encounter with events and actions in AMP. This is like a constrained version of the JavaScript event model. You can attach event listeners and define handlers for events on AMP page elements using the on attribute.

Attaching event handlers with the on attribute

An event handler can be attached to any element, HTML or AMP-HTML, with the on attribute, using the following syntax:

on="event:target[.action]"

When AMP encounters this markup on an element, it listens for event event on the element. When it fires, it searches for an element with ID target, and applies action action. The action component is optional. When absent, the default action for target will be fired, if it has one.

We've seen this a few times already. For example, when we defined buttons to open and close our amp-sidebar menu, we used: <svg ... on="tap:sidenav.open" ... > and <svg ... on="tap:sidenav.close" ... >. So, when there was a tap on our SVG open or...