AMP
DE
English Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Aktionen und Ereignisse

Diese Dokumentation beschreibt Aktionen und Events für AMP Websites, Storys und Ads. Infos über das AMP E-Mail Format findest du in Aktionen und Events in AMP E-Mail.

Das Attribut on wird verwendet, um Event Handler für Elemente zu installieren.

Der Wert für die Syntax ist eine einfache domänenspezifische in der folgenden Form:

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

Die nachfolgenden 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 targetId) verfügbar gemacht wird und die ausgeführt werden soll, wenn das Event ausgelöst wird.

In AMP sind Standardaktionen möglich, die in Elementen implementiert werden können. Wird methodName weggelassen, führt AMP die Standardmethode aus.
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:
  • einfache Strings ohne Anführungszeichen: simple-value
  • Strings mit Anführungszeichen: "string value" oder 'string value'
  • Boolesche Werte: true oder false
  • Zahlen: 11 oder 1.1
  • Punktsyntaxverweis auf Ereignisdaten: event.someDataVariableName

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

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 angezeigt werden, wenn es zuvor durch die Aktion hide oder toggleVisibility oder mithilfe des Attributs hidden ausgeblendet war. 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

Eingabeelemente

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
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"] 		event.checked
select 
event.min
event.max
event.value
input-debounced Wird ausgelöst, wenn der Wert des Elements geändert wird. Dies ist vergleichbar mit dem Standard Event change, dieses hier wird aber erst 300ms nach Ende der Wertänderung 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 Event input auslösen. Entspricht den Event Daten von change.

amp-accordion > section

Event Beschreibung Daten
expand Wird ausgelöst, wenn sich ein Abschnitt im
Akkordeonstil ausdehnt.		 Keiner
collapse Wird ausgelöst, wenn ein Abschnitt im Akkordeonstil reduziert wird. Keiner

amp-carousel[type="slides"]

Event Beschreibung Daten
slideChange Wird ausgelöst, wenn sich die aktuelle Folie des Karussells ändert. 
// Slide number.
event.index

amp-lightbox

Event Beschreibung Daten
lightboxOpen Wird ausgelöst, wenn die Lightbox vollständig sichtbar ist. Keiner
lightboxClose Wird ausgelöst, wenn die Lightbox vollständig geschlossen wird. Keiner

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

amp-selector

Event Blendet das Zielelement aus. Daten
select Wird ausgelöst, wenn eine Option ausgewählt oder abgewählt wird. 
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Event Beschreibung Daten
sidebarOpen Wird ausgelöst, wenn die Seitenleiste nach Ende des Übergangs vollständig geöffnet ist. Keiner
sidebarClose Wird ausgelöst, wenn die Seitenleiste nach Ende des Übergangs vollständig geschlossen ist. Keiner

amp-state

Event Beschreibung Daten
fetch-error(low-trust) Wird ausgelöst, wenn das Abrufen von Daten fehlschlägt. Keiner

amp-video, amp-youtube

Event Beschreibung Daten
firstPlay(low-trust) Wird ausgelöst, wenn der Benutzer das Video zum ersten Mal abspielt. Bei Autoplayvideos wird es ausgelöst, sobald der Benutzer mit dem Video interagiert. Da dieses Ereignis eine niedrige Vertrauensebene hat, kann es die meisten Aktionen nicht auslösen. Es können nur Aktionen der niedrigen Vertrauensebene ausgeführt werden wie z. B. amp-animation.
firstPlay(low-trust) Wird ausgelöst, wenn sich die Wiedergabeposition eines Videos geändert hat. AMP steuert die Häufigkeit des Ereignisses. Das vordefinierte Intervall beträgt 1 Sekunde. Da dieses Ereignis eine niedrige Vertrauensebene hat, kann es die meisten Aktionen nicht auslösen. Es können nur Aktionen der niedrigen Vertrauensebene ausgeführt werden wie z. B. amp-animation. {time, percent}time gibt die aktuelle Zeit in Sekunden an, percent ist eine Zahl zwischen 0 und 1, und gibt die aktuelle Position als Prozentsatz der Gesamtzeit an.

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. 
// Response JSON.
event.response
submit-error Wird ausgelöst, wenn die Antwort auf die Formularübermittlung ein Fehler ist. 
// Response JSON.
event.response
valid Wird ausgelöst, wenn das Formular gültig ist.
invalid Fired when the form is invalid.

Elementspezifische Aktionen

* – alle Elemente

Action Beschreibung
hide Blendet das Zielelement aus.
show Zeigt das Zielelement an. Wenn dadurch das Element autofocus sichtbar wird, springt der Fokus darauf.
toggleVisibility Schaltet die Sichtbarkeit des Zielelements um. Wenn dadurch das Element autofocus sichtbar wird, springt der Fokus darauf.
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.
scrollTo(duration=INTEGER, position=STRING) Scrollt ein Element mit einer glatten Animation in den sichtbaren Bereich.
duration ist optional. Gibt die Länge der Animation in Millisekunden an. Wenn nicht angegeben, wird ein Wert relativ zur Bildlaufdifferenz unter oder gleich 500 Millisekunden verwendet.
position ist optional. Entweder top, center oder bottom (Standardwert ist top). Gibt die Position des Elements im Verhältnis zum Viewport nach dem Scrollen an.
Als Best Practice im Sinne der Barrierefreiheit sollte diese Aktion mit einem Aufruf von focus() kombiniert werden, um den Fokus auf das Element zu setzen, zu dem gescrollt 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-audio

Action Beschreibung
play Spielt das Audio ab. Ist eine No-Op, wenn das Element <amp-audio> dem Element <amp-story> untergeordnet ist.
pause Hält das Audio an. Ist eine No-Op, wenn das Element <amp-audio> dem Element <amp-story> untergeordnet ist.

amp-bodymovin-animation

Aktion Beschreibung
play Spielt die Animation ab.
pause Hält die Animation an.
stop Stoppt die Animation.
seekTo(time=INTEGER) Setzt die currentTime der Animation auf den angegebenen Wert und hält die Animation an.
seekTo(percent=[0,1]) Verwendet den angegebenen Prozentwert, um die currentTime der Animation auf den angegebenen Wert festzulegen und die Animation anzuhalten.

amp-accordion

Aktion Beschreibung
toggle(section=STRING) Schaltet die expanded und collapsed Zustände der amp-accordion Abschnitte um. Wenn es ohne Argumente aufgerufen wird, werden alle Abschnitte des Akkordeons umgeschaltet. Um einen bestimmten Abschnitt auszulösen, gib die ID des Abschnitts an: on="tap:myAccordion.toggle(section='section-id')".
expand(section=STRING) Erweitert die Abschnitte des Akkordeons. Wenn ein Abschnitt bereits erweitert ist, bleibt er erweitert. Wenn es ohne Argumente aufgerufen wird, werden alle Abschnitte des Akkordeons erweitert. Um einen bestimmten Abschnitt auszulösen, gib die ID des Abschnitts an: on="tap:myAccordion.expand(section='section-id')".
collapse(section=STRING) Reduziert die Abschnitte des Akkordeons. Wenn ein Abschnitt bereits reduziert ist, bleibt er reduziert. Wenn es ohne Argumente aufgerufen wird, werden alle Abschnitte des Akkordeons reduziert. Um einen bestimmten Abschnitt auszulösen, gib die ID des Abschnitts an: on="tap:myAccordion.collapse(section='section-id')".

amp-carousel[type="slides"]

Aktion Beschreibung
goToSlide(index=INTEGER) Dreht das Karussell bis zu einem bestimmten Folienindex.
toggleAutoplay(toggleOn=true|false) Schaltet den Autoplaystatus des Karussells um. toggleOn ist optional.

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.
Aktion Beschreibung
open Öffnet die lightbox-gallery. Kann durch Tippen auf ein anderes Element ausgelöst werden, wenn du die ID des Bildes angibst: `on="tap:amp-lightbox-gallery.open(id='image-id')"`.

amp-list

Aktion Beschreibung
refresh Aktualisiert Daten aus der src und rendert die Liste erneut.

amp-live-list

Aktion Beschreibung
update (default) Aktualisiert die DOM Elemente, um aktualisierten Inhalt anzuzeigen.

amp-selector

Aktion Beschreibung
clear Löscht alle Auswahlen von 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.

amp-state

Aktion Beschreibung
refresh Ruft Daten des Attributs `src` erneut ab, während der Browser Cache ignoriert wird.

amp-user-notification

Aktion Beschreibung
dismiss (default) Blendet das referenzierte Benutzerbenachrichtigungselement aus.

Videoelemente

Die folgenden Aktionen werden in den folgenden AMP Videoelementen unterstützt: amp-video, amp-youtube, amp-3q-player, amp-brid-player, amp-dailymotion, amp-delight-player, amp-ima-video.

Aktion Beschreibung
play Spielt das Video ab.
pause Hält das Video an.
mute Schaltet das Video stumm.
unmute Hebt die Stummschaltung des Videos auf.
fullscreencenter Bringt das Video in den Vollbildmodus.

form

Aktion Beschreibung
clear Löscht alle Werte aus den Eingabefeldern des Formulars.
submit Versendet das Formular.

Sonderziele

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
navigateTo(url=STRING, target=STRING, opener=BOOLEAN)

Navigiert das aktuelle Fenster zur angegebenen URL oder zum optional definierten Ziel, sofern angegeben (unterstützt derzeit nur _top und _blank ). Der optionale Parameter opener kann angegeben werden, wenn ein Ziel von _blank verwendet wird, damit die neu geöffnete Seite auf window.opener zugreifen kann. Unterstützt standardmäßige URL
Substitutionen.

Warnung: Es wird empfohlen, nach Möglichkeit normale <a> Links zu verwenden, da AMP.navigateTo von Webcrawlern nicht erkannt wird.
closeOrNavigateTo(url=STRING, target=STRING, opener=BOOLEAN)

Versucht, das Fenster zu schließen, sofern dies zulässig ist. Andernfalls wird ähnlich wie bei der Aktion navigateTo navigiert. Nützlich für Use Cases, in denen es sein kann, dass eine Schaltfläche "Zurück" das Fenster schließen muss, wenn es in einem neuen Fenster von der vorherigen Seite geöffnet wurde, oder wenn eine Navigation erforderlich ist, wenn das Fenster nicht geöffnet wurde.

Warnung: Es wird empfohlen, nach Möglichkeit normale <a> Links zu verwenden, da AMP.closeOrNavigateTo von Webcrawlern nicht erkannt wird.
goBack Navigiert in den Verlauf zurück.
print Öffnet den Druckdialog, um die aktuelle Seite zu drucken.
scrollTo(id=STRING, duration=INTEGER, position=STRING) Scrollt zur angegebenen Element ID auf der aktuellen Seite.
optoutOfCid Deaktiviert die Client ID Generierung für alle Bereiche.
setState({foo: 'bar'})1

Benötigt amp-bind.

Führt ein Objektliteral in den bindbaren Status zusammen.
pushState({foo: 'bar'})1

Benötigt amp-bind.

Führt ein Objektliteral in den bindbaren Status zusammen und verschiebt einen neuen Eintrag in den Browserverlaufsstapel. Da der Eintrag gelöscht wird, werden die vorherigen Variablenwerte wiederhergestellt (in diesem Beispiel foo).

1Bei Verwendung mit mehreren Aktionen, warten nachfolgende Aktionen auf setState() oder pushState(), um den vorherigen Aufruf abzuschließen. Pro Ereignis ist nur ein einziger setState() oder pushState() zulässig.

Target: amp-access

Das Ziel amp-access wird von der Komponente amp-access bereitgestellt.

Für das Ziel amp-access gelten aus folgenden Gründen spezielle Bedingungen:

  1. Dieses Ziel kann keine beliebige ID erhalten. Das Ziel ist immer amp-access.
  2. The actions for amp-access are dynamic depending on the structure of the AMP Access Configuration.

Hier findest du weitere Informationen über die Verwendung des Ziels amp-access.