Aktionen und Events in AMP E-Mails
Das Attribut on wird verwendet, um Event Handler für Elemente zu platzieren. Die unterstützten Events sind vom Element abhängig.
Der Wert der Syntax ist eine einfache domänenspezifische Sprache in der folgenden Form:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Die folgende Tabelle beschreibt die einzelnen Elemente der Syntax.
| Syntax | Erforderlich? | Beschreibung |
|---|---|---|
eventName | ja | Das ist der Name des Events, welches das Element verfügbar macht. |
targetId | ja | Das ist die DOM ID für das Element oder ein vordefiniertes besonderes Ziel, für das eine Aktion als Reaktion auf das Event ausgeführt werden soll. Im folgenden Beispiel ist die targetId die DOM ID des Ziels amp-lightbox, photo-slides. <amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Bilder anzeigen</button> |
methodName | nein | Das ist für Elemente mit Standardaktionen. Dies ist die Methode, welche vom Zielelement (referenziert von In AMP sind Standardaktionen möglich, die für Elemente implementiert werden können. Wird |
arg=value | nein | Manche Aktionen können (sofern sie dokumentiert sind) Argumente akzeptieren. Die Argumente werden in Klammern im Format key=value angegeben. Die zulässigen Werte sind:
|
Verarbeiten mehrerer Events
Um mehrere Events eines Elements abzuhören, müssen diese durch ein Semikolon ; getrennt werden.
Beispiel: on="submit-success:lightbox1;submit-error:lightbox2"
Mehrere Aktionen für ein Event
Für dasselbe Ereignis können mehrere Aktionen nacheinander ausgeführt werden. Dazu werden die Aktionen durch ein Komma ',' getrennt.
Beispiel: on="tap:target1.actionA,target2.actionB"
Global definierte Events und Aktionen
AMP definiert das Event tap als global. Dieses kann für jedes HTML Element (einschließlich AMP Elemente) abgehört werden.
AMP definiert außerdem die Aktionen hide, show und toggleVisibility als global. Sie können auf jedem beliebigen HTML Element ausgelöst werden.
Ein Element kann nur wieder angezeigt werden, wenn es zuvor durch die Aktion hide oder toggleVisibility oder mithilfe des Attributs hidden ausgeblendet wurde. Die Aktion show unterstützt keine Elemente, die mit der CSS Eigenschaft display:none oder der AMP Eigenschaft layout=nodisplay ausgeblendet waren.
In AMP ist beispielsweise Folgendes möglich:
<div id="warning-message">Warning...</div> <button on="tap:warning-message.hide">Cool, thanks!</button>
Elementspezifische Events
* – alle Elemente
| Event | Beschreibung |
|---|---|
tap | Wird ausgelöst, wenn das Element angeklickt/angetippt wird. |
Elemente für die Eingabe
| Event | Beschreibung | Elemente | Daten |
|---|---|---|---|
change | Wird ausgelöst, wenn der Wert des Elements geändert und bestätigt wird. Die Eigenschaften der Daten spiegeln diese in HTMLInputElement und HTMLSelectElement wider. | input | event.min |
input[type="radio"],input[type="checkbox"]
| event.checked | ||
select | event.min | ||
input-debounced | Wird ausgelöst, wenn der Wert des Elements geändert wird. Das ist vergleichbar mit dem Standard Event change, dieses hier wird aber erst 300 ms nach Ende der Änderung des Eingabewertes ausgelöst. | Elemente, die das Event input auslösen. | Entspricht den Event Daten von change. |
input-throttled | Wird ausgelöst, wenn der Wert des Elements geändert wird. Das ist vergleichbar mit dem Standard Event change, dieses hier wird aber so gedrosselt, dass es höchstens einmal alle 100 ms ausgelöst wird, während der Eingabewert sich ändert. | Elemente, die das Ereignis input auslösen. | Entspricht den Event Daten von change. |
amp-accordion > section
| Event | Beschreibung | Daten |
|---|---|---|
expand | Wird ausgelöst, wenn ein Abschnitt im Akkordeonstil erweitert wird. | Keine |
collapse | Wird ausgelöst, wenn ein Abschnitt im Akkordeonstil reduziert wird. | Keine |
amp-carousel[type="slides"]
| Event | Beschreibung | Daten |
|---|---|---|
slideChange | Wird ausgelöst, wenn sich die aktuelle Folie des Karussells ändert. | // Foliennummer. |
amp-lightbox
| Event | Beschreibung | Daten |
|---|---|---|
lightboxOpen | Wird ausgelöst, wenn die Lightbox vollständig sichtbar ist. | Keine |
lightboxClose | Wird ausgelöst, wenn die Lightbox vollständig geschlossen wird. | Keine |
amp-list
| Event | Beschreibung | Daten |
|---|---|---|
fetch-error(low-trust) | Wird ausgelöst, wenn das Abrufen von Daten fehlschlägt. | Keine |
amp-selector
| Event | Beschreibung | Data |
|---|---|---|
select | Wird ausgelöst, wenn eine Option ausgewählt oder abgewählt wird. | // Wert des Attributs "option" des Zielelements. |
amp-sidebar
| Event | Beschreibung | Daten |
|---|---|---|
sidebarOpen | Wird ausgelöst, wenn die Seitenleiste nach Ende des Übergangs vollständig geöffnet ist. | Keine |
sidebarClose | Wird ausgelöst, wenn die Seitenleiste nach Ende des Übergangs vollständig geschlossen ist. | Keine |
amp-state
| Event | Beschreibung | Daten |
|---|---|---|
fetch-error(low-trust) | Wird ausgelöst, wenn das Abrufen von Daten fehlschlägt. | Keine |
form
| Event | Beschreibung | Daten |
|---|---|---|
submit | Wird ausgelöst, wenn das Formular abgesendet wird. | |
submit-success | Wird ausgelöst, wenn die Formularübermittlung laut Rückantwort erfolgreich war. | // JSON mit Rückantwort. |
submit-error | Wird ausgelöst, wenn die Formularübermittlung laut Rückantwort fehlerhaft war. | // JSON mit Rückantwort. |
valid | Wird ausgelöst, wenn das Formular gültig ist. | |
invalid | Wird ausgelöst, wenn das Formular ungültig ist. |
Elementspezifische Aktionen
* (alle Elemente)
| Aktion | Beschreibung |
|---|---|
hide | Blendet das Zielelement aus. |
show | Zeigt das Zielelement an. Wenn dadurch das Elementautofocus sichtbar wird, springt der Fokus darauf. |
toggleVisibility | Schaltet die Sichtbarkeit des Zielelements um. Wenn dadurch das Element autofocus sichtbar wird, rückt es in den Fokus. |
toggleClass(class=STRING, force=BOOLEAN) | Schaltet die Klasse des Zielelements um. force ist optional und stellt sicher, dass die Klasse bei true nur hinzugefügt, aber nicht entfernt wird, und bei false nur entfernt, aber nicht hinzugefügt wird. |
focus | Setzt den Fokus auf das Zielelement. Um den Fokus aufzuheben, muss ein anderes Element mittels focus den Fokus erhalten (in der Regel das übergeordnete Element). Aus Gründen der Barrierefreiheit raten wir dringend davon ab, den Fokus zu diesem Zweck auf body/documentElement zu setzen. |
amp-accordion
| Aktion | Beschreibung |
|---|---|
toggle(section=STRING) | Schaltet zwischen den Zuständen expanded und collapsed der Sektionen von amp-accordion um. Bei Aufruf ohne Argumente werden alle Sektionen des Akkordeons umgeschaltet. Gib die Section ID, damit die Aktion bei einer bestimmten Sektion ausgelöst wird: on="tap:myAccordion.toggle(section='section-id')". |
expand(section=STRING) | Erweitert die Sektionen des Akkordeons. Ist eine Sektion bereits erweitert, bleibt sie in diesem Zustand. Bei Aufruf ohne Argumente werden alle Sektionen des Akkordeons erweitert. Gib die Section ID an, damit das Event bei einer bestimmten Sektion ausgelöst wird: on="tap:myAccordion.expand(section='section-id')". |
collapse(section=STRING) | Reduziert die Sektionen des Akkordeons. Ist eine Sektion bereits reduziert, bleibt sie in diesem Zustand. Bei Aufruf ohne Argumente werden alle Sektionen des Akkordeons reduziert. Gib die Section ID an, damit das Event bei einer bestimmten Sektion ausgelöst wird: on="tap:myAccordion.collapse(section='section-id')". |
amp-carousel[type="slides"]
| Aktion | Beschreibung |
|---|---|
goToSlide(index=INTEGER) | Dreht das Karussell bis zu einem bestimmten Folienindex. |
amp-image-lightbox
| Aktion | Beschreibung |
|---|---|
open (default) | Öffnet die Image Lightbox, wobei das Bild, welches die Aktion ausgelöst hat, zum Quellbild wird. |
amp-lightbox
| Aktion | Beschreibung |
|---|---|
open (default) | Öffnet die Lightbox. |
close | Schließt die Lightbox. |
amp-list
| Event | Beschreibung | Daten |
|---|---|---|
changeToLayoutContainer | Aktualisiert das Layout von amp-list zu layout="CONTAINTER", um eine dynamische Größenänderung zu ermöglichen. | |
fetch-error(low-trust) | Wird ausgelöst, wenn das Abrufen von Daten fehlschlägt. | Keine |
amp-selector
| Aktion | Beschreibung |
|---|---|
clear | Löscht alle Auswahlen aus einem definierten amp-selector. |
selectUp(delta=INTEGER) | Verschiebt die Auswahl um den Wert von 'delta' nach oben. Der Standardwert von 'delta' ist -1. Wenn keine Optionen ausgewählt sind, erhält der ausgewählte Zustand den Wert der letzten Option. |
selectDown(delta=INTEGER) | Verschiebt die Auswahl um den Wert von 'delta' nach unten. Das Standardwert für 'delta' ist 1. Wenn keine Optionen ausgewählt sind, wird der ausgewählte Zustand zum Wert der ersten Option. |
toggle(index=INTEGER, value=BOOLEAN) | Schaltet die Anwendung von `selected` um. Wenn das Attribut select nicht vorhanden ist, wird es durch diese Aktion hinzugefügt. Wenn das Attribut select vorhanden ist, wird es durch diese Aktion entfernt. Du kannst das Hinzufügen oder Entfernen erzwingen und beibehalten, indem du einen Booleschen Wert in das Argument `value` aufnimmst. Der Wert `true` erzwingt das Hinzufügen des Attributs `selected` und entfernt es nicht, wenn es bereits vorhanden ist. Der Wert `false` entfernt das Attribut, fügt es jedoch nicht hinzu, wenn es nicht vorhanden ist. |
amp-sidebar
| Aktion | Beschreibung |
|---|---|
open (default) | Öffnet die Seitenleiste. |
close | Schließt die Seitenleiste. |
toggle | Schaltet den Status der Seitenleiste um. |
form
| Aktion | Beschreibung |
|---|---|
clear | Löscht alle Werte aus den Eingabefeldern des Formulars. |
submit | Sendet das Formular ab. |
Besondere Ziele
Die folgenden Ziele werden vom AMP System bereitgestellt und haben besondere Anforderungen:
Ziel: AMP
Das Ziel AMP wird von der AMP Runtime bereitgestellt und implementiert Aktionen der obersten Ebene, die für das gesamte Dokument gelten.
| Aktion | Beschreibung |
|---|---|
setState({foo: 'bar'})1
| Benötigt amp-bind. Fügt ein Objektliteral in den bindbaren Status ein. |
1Bei Verwendung mit mehreren Aktionen, warten nachfolgende Aktionen auf setState(), um den vorherigen Aufruf abzuschließen. Pro Ereignis ist nur ein einziger setState() zulässig.