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.
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...