Azioni ed eventi

Important: this documentation is not applicable to your currently selected format email!

Questa documentazione descrive azioni ed eventi per siti web, storie e annunci AMP. Leggere il documento Azioni ed eventi nelle email AMP per il formato delle email AMP.

L'attributo on viene utilizzato per installare i gestori di eventi sugli elementi. Gli eventi supportati dipendono dall'elemento.

Il valore per la sintassi è un semplice linguaggio specifico del dominio del modulo:

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

Consultare la tabella seguente per le descrizioni di ciascun elemento della sintassi.

Sintassi	Obbligatorio?	Descrizione
`eventName`	sì	Questo è il nome dell'evento esposto da un elemento.
`targetId`	sì	Questo è l'id DOM dell'elemento, oppure un target speciale predefinito su cui occorre eseguire un'azione in risposta all'evento. Nel seguente esempio, il `targetId` è l'id DOM del target `amp-lightbox`, `photo-slides`. <amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Show Images</button>
`methodName`	no	Questo si applica ad elementi con azioni predefinite. Si tratta del metodo esposto dall'elemento target (referenziato da `targetId`) che deve essere eseguito all'attivazione dell'evento. L'AMP prevede il concetto di azioni predefinite che possono essere implementate dagli elementi. Perciò omettendo `methodName`, l'AMP eseguirà il metodo predefinito.
`arg=value`	no	Alcune azioni, se documentate, possono accettare argomenti. Gli argomenti sono definiti tra parentesi nella notazione `key=value`. I valori accettati sono: stringhe semplici senza virgolette: `simple-value` stringhe con virgolette: `"string value"` oppure `'string value'` valori booleani: `true` o `false` numeri: `11` o `1.1` dati con sintassi puntata riferiti ad eventi: `event.someDataVariableName`

Gestione di più eventi

È possibile ricevere più eventi su un elemento separando gli eventi con un punto e virgola ;.

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

Azioni multiple per un evento

È possibile eseguire più azioni in sequenza per lo stesso evento separando le azioni con una virgola ",".

Esempio: on="tap:target1.actionA,target2.actionB"

Eventi e azioni definiti a livello globale

AMP permette di definire un evento tap globale che può essere ricevuto su qualsiasi elemento HTML (inclusi gli elementi AMP).

AMP permette inoltre di definire le azioni globali hide, show e toggleVisibility che possno essere attivate su qualsiasi elemento HTML.

Un elemento può essere mostrato solo se in precedenza era stato nascosto da un'azione hide o toggleVisibility, oppure usando l'attributo hidden. L'azione show non supporta elementi nascosti dall'attributo CSS display:none o dall'attributo AMP layout=nodisplay.

Ad esempio, in AMP è possibile la seguente struttura:

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

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

Eventi specifici di un elemento

* - tutti gli elementi

Evento	Descrizione
`tap`	Attivazione facendo clic o toccando l'elemento.

Elementi di input

Event	Descrizione	Elementi	Dati
`change`	Attivazione quando il valore dell'elemento viene modificato e confermato. Le proprietà dei dati rispecchiano quelle in HTMLInputElement e HTMLSelectElement.	`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`	Attivazione quando il valore dell'elemento viene modificato. È simile all'evento `change` standard, ma si attiva solo quando sono trascorsi 300 ms senza che il valore dell'input subisca altre variazioni.	Elementi che attivano l'evento `input`.	Gli stessi dati dell'evento `change`.
`input-throttled`	Attivazione quando il valore dell'elemento viene modificato. È simile all'evento `change` standard, ma può essere attivato al massimo una volta ogni 100 ms mentre il valore dell'input cambia.	Elementi che attivano l'evento `input`.	Gli stessi dati dell'evento `change`.

amp-accordion > section

Evento	Descrizione	Dati
`expand`	Attivazione all'espansione di una sezione a soffietto.	Nessuno.
`collapse`	Attivazione alla compressione di una sezione a soffietto.	Nessuno.

amp-carousel[type="slides"]

Evento	Descrizione	Dati
`slideChange`	Attivazione quando cambia la diapositiva corrente di una sequenza.	//Numero di diapositiva. event.index

Evento	Descrizione	Dati
`lightboxOpen`	Attivazione quando il lightbox è completamente visibile.	Nessuno
`lightboxClose`	Attivazione quando il lightbox è completamente chiuso.	Nessuno

amp-list

Evento	Descrizione	Dati
`changeToLayoutContainer`	Aggiorna il layout di `amp-list` a `layout="CONTAINTER"` per consentire il ridimensionamento dinamico.
`fetch-error`(bassa affidabilità)	Attivazione quando il recupero dei dati non riesce.	Nessuno

amp-selector

Evento	Descrizione	Dati
`select`	Attivazione quando un'opzione è selezionata o deselezionata.	// Valore dell'attributo "option" dell'elemento target. `event.targetOption` // Array di valori degli attributi "option" di tutti gli elementi selezionati. `event.selectedOptions`Option

Evento	Descrizione	Dati
`sidebarOpen`	Attivazione quando la barra laterale è completamente aperta al termine della transizione.	Nessuno
`sidebarClose`	Attivazione quando la barra laterale è completamente chiusa al termine della transizione.	Nessuno

amp-state

Evento	Descrizione	Dati
`fetch-error`(bassa affidabilità)	Attivazione quando il recupero dei dati non riesce.	Nessuno

amp-video, amp-youtube

Evento	Descrizione	Dati
`firstPlay`(bassa affidabilità)	Attivazione alla prima riproduzione del video da parte dell'utente. L'attivazione sui video a riproduzione automatica avviene non appena l'utente interagisce con il video. Questo evento è a bassa affidabilità, il che implica che non può attivare la maggior parte delle azioni; possono essere eseguite solo azioni a bassa affidabilità, quali le azioni `amp-animation`.
`timeUpdate`(bassa affidabilità)	Attivazione quando la posizione di riproduzione di un video cambia. La frequenza dell'evento è controllata da AMP ed è attualmente impostata a intervalli di 1 secondo. Questo evento è a bassa affidabilità, per cui non può attivare la maggior parte delle azioni; possono essere eseguite solo azioni a bassa affidabilità quali le azioni `amp-animation`.	`{time, percent}` `time` indica l'orario attuale in secondi, `percent` è un numero compreso tra 0 e 1 e indica la posizione attuale in termini percentuali sul tempo totale.

moduli

Evento	Descrizione	Dati
`submit`	Attivazione all'invio del modulo.
`submit-success`	Attivazione quando la risposta all'invio del modulo ha successo.	//Risposta JSON. event.response
`submit-error`	Attivazione quando la risposta all'invio del modulo è un errore.	// Risposta JSON. event.response
`valid`	Attivazione quando il modulo è valido.
`invalid`	Fired when the form is invalid.

Azioni specifiche di un elemento

* (tutti gli elementi)

Azione	Descrizione
`hide`	Hides the target element.
`show`	Shows the target element. If an `autofocus` element becomes visible as a result, it gains focus.
`toggleVisibility`	Attiva e disattiva la visibilità dell'elemento target. Se un elemento `autofocus` diventa visibile di conseguenza, esso diventa attivo.
`toggleClass(class=STRING, force=BOOLEAN)`	Alterna le classi dell'elemento target. L'attributo `force` è opzionale e, se definito, garantisce che la classe sia solo aggiunta ma non rimossa, se l'opzione è impostata su `true`, e che essa sia solo rimossa ma non aggiunta, se l'opzione è impostata su `false`.
`scrollTo(duration=INTEGER, position=STRING)`	Permette di scorrere un elemento nella visualizzazione con un'animazione fluida. L'attributo `duration` è opzionale. Indica la lunghezza dell'animazione in millisecondi. Se non specificato, viene utilizzato un valore relativo alla differenza di scorrimento minore o uguale a 500 millisecondi. L'attributo `position` è opzionale. Può assumere uno dei valori `top`, `center` o `bottom` (valore predefinito `top`). Indica la posizione dell'elemento rispetto alla finestra di visualizzazione dopo lo scorrimento. Per favorire l'accessibilità, abbinarlo a una chiamata a `focus()` per evidenziare l'elemento in scorrimento.
`focus`	Aumenta la messa a fuoco dell'elemento target. Per ridurre la messa a fuoco, attivare il `focus` su un altro elemento (di solito l'elemento genitore). Sconsigliamo di ridurre la messa a fuoco di un elemento, attivando il focus sull'elemento `body`/`documentElement` per motivi di accessibilità.

amp-audio

Azione	Descrizione
`play`	Riproduce l'audio. Sarà un no-op se l'elemento è un discendente di un elemento `<amp-story>`.
`pause`	Riproduce l'audio. Sarà un no-op se l'elemento è un discendente di un elemento `<amp-story>`.

amp-bodymovin-animation

Azione	Descrizione
`play`	Riproduce l'animazione.
`pause`	Mette in pausa l'animazione.
`stop`	Arresta l'animazione.
`seekTo(time=INTEGER)`	Imposta il parametro currentTime dell'animazione sul valore specificato e la mette in pausa.
`seekTo(percent=[0,1])`	Usa il valore percentuale specificato per determinare il valore corrispondente del parametro currentTime dell'animazione e la mette in pausa.

amp-accordion

Azione	Descrizione
`toggle(section=STRING)`	Alterna gli stati `expanded` e `collapsed` delle sezioni `amp-accordion`. Quando l'azione è richiamata senza argomenti, essa alterna tutte le sezioni del pannello a soffietto. Per attivare una sezione specifica occorre fornire l'id della sezione: `on="tap:myAccordion.toggle(section='section-id')"`.
`expand(section=STRING)`	Espande le sezioni del pannello a soffietto. Se una sezione è già espansa, rimane espansa. Quando l'azione è richiamata senza argomenti, essa espande tutte le sezioni del pannello a soffietto. Per attivare una sezione specifica occorre fornire l'id della sezione: `on="tap:myAccordion.expand(section='section-id')"`.
`collapse(section=STRING)`	Comprime le sezioni del pannello a soffietto. Se una sezione è già compressa, rimane compressa. Quando l'azione è richiamata senza argomenti, essa comprime tutte le sezioni del pannello a soffietto. Per attivare una sezione specifica occorre fornire l'id della sezione: `on="tap:myAccordion.collapse(section='section-id')"`.

amp-carousel[type="slides"]

Azione	Descrizione
`goToSlide(index=INTEGER)`	Avanza nella sequenza fino alla diapositiva che occupa la posizione dell'indice specificato
`toggleAutoplay(toggleOn=true\|false)`	Attiva e disattiva lo stato di riproduzione automatica della sequenza. `toggleOn` è opzionale.

Azione	Descrizione
`open (default)`	Apre il lightbox dell'immagine con l'immagine sorgente che ha attivato l'azione.

amp-lightbox

Azione	Descrizione
`open (default)`	Apre il lightbox.
`close`	Chiude il lightbox.

Azione	Descrizione
`open`	Apre la raccolta di lightbox. Può essere attivata toccando un altro elemento, indicando l'id immagine: `on =" tap: amp-lightbox-gallery.open (id = 'image-id') "'.

amp-list

Azione	Descrizione
`refresh`	Aggiorna i dati dall'elemento `src` ed esegue di nuovo il rendering dell'elenco.

amp-live-list

Azione	Descrizione
`update (default)`	Aggiorna gli elementi DOM per mostrare il contenuto aggiornato.

amp-selector

Azione	Descrizione
`clear`	Cancella tutte le selezioni da un elemento `amp-selector` definito.
`selectUp(delta=INTEGER)`	Sposta la selezione verso l'alto del valore indicato dal parametro 'delta'. Il valore predefinito di 'delta' è -1. Se non sono selezionate opzioni, lo stato selezionato diventerà il valore dell'ultima opzione.
`selectDown(delta=INTEGER)`	Sposta la selezione verso il basso del valore indicato dal parametro 'delta'. Il valore predefinito di 'delta' è -1. Se non sono selezionate opzioni, lo stato selezionato diventerà il valore della prima opzione.
`toggle(index=INTEGER, value=BOOLEAN)`	Attiva o disattiva l'applicazione dell'elemento 'selezionato'. Se l'attributo select è assente, questa azione lo aggiunge. Se l'attributo select è presente, questa azione lo rimuove. Per forzare un'aggiunta o una rimozione, occorre includere un valore booleano nell'argomento 'value'. Un valore "true" forzerà l'aggiunta dell'attributo 'selected' e non lo rimuoverà se già presente. Un valore 'false' rimuoverà l'attributo, ma non lo aggiungerà se è assente.

amp-sidebar

Azione	Descrizione
`open (default)`	Apre la barra laterale.
`close`	Chiude la barra laterale.
`toggle`	Alterna gli stati della barra laterale.

amp-state

Azione	Descrizione
`refresh`	Recupera di nuovo i dati dall'attributo `src` ignorando la cache del browser.

amp-user-notification

Azione	Descrizione
`dismiss (default)`	Nasconde l'elemento di notifica dell'utente referenziato.

Elementi video

Le azioni riportate di seguito sono supportate dai seguenti elementi video AMP: amp-video, amp-youtube, amp-3q-player, amp-brid-player, amp-dailymotion, amp-delight-player, amp-ima-video.

Azione	Descrizione
`play`	Riproduce il video.
`pause`	Mette in pausa il video.
`mute`	Disattiva l'audio del video.
`unmute`	Riattiva l'audio del video.
`fullscreencenter`	Espande il video a schermo intero.

modulo

Azione	Descrizione
`clear`	Cancella tutti i valori nei campi di input del modulo.
`submit`	Invia il modulo.

Target speciali

Di seguito sono riportati i target forniti dal sistema AMP con requisiti speciali:

Target: AMP

Il target AMP è fornito dal sistema di runtime AMP e implementa azioni di primo livello che si applicano all'intero documento.

Azione	Descrizione
`navigateTo(url=STRING, target=STRING, opener=BOOLEAN)`	Permette di esplorare nella finestra corrente l'URL dato, portandola al target specificato, se indicato (attualmente sono supportati solo i valori `_top` e `_blank` ). Il parametro opzionale `opener` può essere indicato se si usa un target di tipo `_blank` per consentire alla pagina appena aperta di accedere all'elemento `window.opener`. Supporta sostituzioni di URL standard. Attenzione: L'utilizzo di normali `<a>` collegamenti è consigliato ove possibile poiché `AMP.navigateTo` non viene riconosciuto dai crawler web.
`closeOrNavigateTo(url=STRING, target=STRING, opener=BOOLEAN)`	Prova a chiudere la finestra se consentito, altrimenti permette di esplorare in modo simile all'azione `navigateTo`. Utile per i casi d'uso in cui un pulsante "Indietro" potrebbe tentare di chiudere la finestra se essa era stata aperta in una nuova finestra dalla pagina precedente o per proseguire l'esplorazione se la finestra non era stata aperta. Attenzione: L'utilizzo di normali `<a>` collegamenti è consigliato ove possibile poiché `AMP.closeOrNavigateTo` non viene riconosciuto dai crawler web.
`goBack`	Torna indietro nella cronologia.
`print`	Apre la finestra di dialogo Stampa per stampare la pagina corrente.
scrollTo(id=STRING, duration=INTEGER, position=STRING)	Scorre fino all'ID dell'elemento fornito nella pagina corrente.
optoutOfCid	Disattiva la generazione dell'ID client per tutti gli ambiti.
`setState({foo: 'bar'})`¹	Richiede amp-bind. Aggiunge il valore letterale di un oggetto allo stato associabile.
`pushState({foo: 'bar'})`¹	Richiede amp-bind. Aggiunge il valore letterale di un oggetto allo stato associabile e inserisce un nuovo elemento nello stack della cronologia del browser. La visualizzazione dell'elemento ripristinerà i precedenti valori delle variabili (in questo esempio, `foo`).

¹In caso di utilizzo con azioni multiple, le azioni successive attenderanno il completamento di setState() o pushState() prima della chiamata. Per ogni evento è consentita una sola chiamata di setState() o pushState().

Target: amp-access

Il target amp-access è fornito dal componente amp-access.

Il target amp-access è speciale per i seguenti motivi:

Non è possibile assegnare un ID arbitrario a questo target. Il target è sempre amp-access.
Le azioni per amp-access sono dinamiche a seconda della struttura della configurazione di accesso AMP.

Consultare i dettagli sull'utilizzo del target amp-access.

{{#initial}}Componenti importanti{{/initial}}{{^initial}}Componenti{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}Articoli popolari{{/initial}}{{^initial}}Risultati{{/initial}}

{{title}}

;(

Si è verificato un errore…

¯\_(ツ)_/¯

Nessun risultato trovato.

Azioni ed eventi

Gestione di più eventi

Azioni multiple per un evento

Eventi e azioni definiti a livello globale

Eventi specifici di un elemento

* - tutti gli elementi

Elementi di input

amp-accordion > section

amp-carousel[type="slides"]

amp-lightbox

amp-list

amp-selector

amp-sidebar

amp-state

amp-video, amp-youtube

moduli

Azioni specifiche di un elemento

* (tutti gli elementi)

amp-audio

amp-bodymovin-animation

amp-accordion

amp-carousel[type="slides"]

amp-image-lightbox

amp-lightbox

amp-lightbox-gallery

amp-list

amp-live-list

amp-selector

amp-sidebar

amp-state

amp-user-notification

Elementi video

modulo

Target speciali

Target: AMP

Target: amp-access