Skip to content

Latest commit

 

History

History
145 lines (122 loc) · 4.21 KB

amp-actions-and-events.md

File metadata and controls

145 lines (122 loc) · 4.21 KB
Raw

Actions and Events in AMP

The on attribute is used to install event handlers on elements. The events that are supported depend on the element.

The value for the syntax is a simple domain specific language of the form:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Here's what each part of this means: eventName required This is the name of the event that an element exposes.

targetId required This is the DOM id for the element you'd like to execute an action on in response to the event. In the following example, the targetId is the DOM id of the amp-lightbox target, photo-slides.

<amp-lightbox id="photo-slides"></amp-lightbox>
<button on="tap:photo-slides">Show Images</button>

methodName optional for elements with default actions This is the method that the target element (referenced by targetId) exposes and you'd like to execute when the event is triggered.

AMP has a concept of a default action that elements can implement. So when omitting the methodName AMP will execute that default method.

arg=value optional Some actions, if documented, may accept arguments. The arguments are defined between parentheses in key=value notation. The accepted values are:

  • simple unquoted strings: simple-value;
  • quoted strings: "string value" or 'string value';
  • boolean values: true or false;
  • numbers: 11 or 1.1.

Handling Multiple Events

You can listen to multiple events on an element by separating the two events with a semicolon ;.

Example: on="submit-success:lightbox1;submit-error:lightbox2"

Globally defined Events and Actions

Currently AMP defines tap event globally that you can listen to on any HTML element (including amp-elements).

AMP also defines a hide action globally that you can trigger on any HTML element.

For example, the following is possible in AMP.

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

Element Specific Events

Tag Event Description
form submit Fired when the form is submitted
form submit-success Fired when the form submission response is success.
form submit-error Fired when the form submission response is an error.

Element Specific Actions

Tag Action Description
amp-sidebar open (default) Opens the sidebar
amp-sidebar close Closes the sidebar
amp-sidebar toggle Toggles the state of the sidebar
amp-lightbox open (default) Opens the lightbox
amp-lightbox close Closes the lightbox
amp-image-lightbox (default) Opens the image lightbox with the source image being the one that triggered the action.
amp-live-list update (default) Updates the DOM items to show updated content.
amp-user-notification dismiss (default) Hides the referenced user notification element