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

Acciones y eventos

Este documento trata sobre las acciones y eventos que puede usar en los sitios web, historias y anuncios de AMP. Lea sobre las Acciones y eventos en el correo electrónico de AMP para el formato del correo electrónico de AMP.

El atributo on se utiliza para instalar controladores de eventos en los elementos. Los eventos que sean compatibles dependerán del elemento.

El valor que se le asigna a la sintaxis consiste en usar un lenguaje sencillo específico para el dominio en el formulario:

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

Consulte en la siguiente tabla la descripción sobre cada parte de la sintaxis.

Sintaxis ¿Es necesario? Descripción
eventName Sí Es el nombre del evento donde se presenta un elemento.
targetId Sí Es el ID del DOM para el elemento o un objetivo especial que se definió previamente, en el cual le gustaría ejecutar una acción como respuesta a un evento. En el siguiente ejemplo, el targetId es el ID del DOM para los objetivos amp-lightbox y photo-slides. 
<amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Show Images</button>
methodName No Se utiliza cuando los elementos tienen acciones predeterminadas.

Este es el método que presenta el elemento objetivo (al cual se hace referencia usando targetId) que le gustaría ejecutar cuando se desencadene el evento.

AMP cuenta con un concepto de acción predeterminada que puede implementarse en los elementos. Entonces, al omitir methodName AMP ejecutará ese método de forma predeterminada.
arg=value No Algunas acciones, cuando se documentan, pueden aceptar argumentos. Los argumentos se definen entre paréntesis mediante la notación key=value. Los valores aceptados son:
  • cadenas sencillas sin comillas: simple-value
  • cadenas con comillas: "string value" o 'string value'
  • valores booleanos: true o false
  • números: 11 o 1.1
  • sintaxis dot que hace referencia a los datos de un evento: event.someDataVariableName

Cómo administrar varios eventos

Puede concentrarse en varios eventos de un elemento si los separa mediante un punto y coma ;.

Por ejemplo: on="submit-success:lightbox1;submit-error:lightbox2"

Varias acciones para un evento

Puede ejecutar varias acciones de manera consecutiva para el mismo evento si las separa mediante una coma “,”.

Por ejemplo: on="tap:target1.actionA,target2.actionB"

Cómo definir los eventos y acciones de manera global

En AMP se define el evento tap de manera global para que pueda concentrarse en cualquiera de los elementos HTML (incluidos los elementos de AMP).

En AMP también se definen las acciones hide, show y toggleVisibility globalmente para que pueda activarlas en cualquier elemento HTML.

Un elemento solo puede mostrarse si estaba oculto previamente por una acción hide o toggleVisibility, o mediante el atributo hidden. La acción show no es compatible con los elementos ocultos por CSS display:none o layout=nodisplay de AMP.

Por ejemplo, en AMP es posible hacer lo siguiente:

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

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

Eventos con elementos específicos

* - todos los elementos

Evento Descripción
tap Se activa al presionar o hacer clic sobre el elemento.

Elementos de entrada

Evento Descripción Elementos Datos
change Se activa cuando el valor del elemento cambia y se asigna.

Las propiedades de los datos son similares a los que se encuentran en HTMLInputElement y de 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 Se activa cuando el valor del elemento cambia. Es parecido al evento change estándar, pero solo se activa cuando hayan pasado 300 ms después de que el valor de entrada dejó de modificarse. Elementos que activan el evento input. Es similar a los datos del evento change.
input-throttled Se activa cuando el valor del elemento cambia. Es parecido al evento change estándar, pero está regulado para activarse máximo una vez cada 100 ms mientras el valor de entrada continúe modificándose. Elementos que activan el evento input. Es similar a los datos del evento change.

amp-accordion > sección

Evento Descripción Datos
expand Se activa cuando la sección accordion aumenta. Ninguno.
collapse Se activa cuando la sección accordion colapsa. Ninguno.

amp-carousel[type="slides"]

Evento Descripción Datos
slideChange Se activa cuando cambia la diapositiva en el carrusel. 
// Slide number.
event.index

amp-lightbox

Evento Descripción Datos
lightboxOpen Se activa cuando lightbox está completamente visible. Ninguno
lightboxClose Se activa cuando lightbox está totalmente cerrado. Ninguno

amp-list

Evento Descripción Datos
changeToLayoutContainer Actualiza el diseño de amp-list a layout="CONTAINTER" para permitir cambios en el tamaño de forma dinámica.
fetch-error(poco confiable) Se activa cuando ocurre un error durante la consulta de los datos. Ninguno

amp-selector

Evento Descripción Datos
select Se activa al seleccionar o anular la selección de una opción. 
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

Evento Descripción Datos
sidebarOpen Se activa cuando la barra lateral se abre completamente después de que terminó la transición. Ninguno
sidebarClose Se activa cuando la barra lateral se cierra completamente después de que terminó la transición. Ninguno

amp-state

Evento Descripción Datos
fetch-error(poco confiable) Se activa cuando ocurre un error durante la consulta de los datos. Ninguno

amp-video, amp-youtube

Evento Descripción Datos
firstPlay(poco confiable) Se activa la primera vez que el usuario reproduce el video. En los videos de reproducción automática se activa a partir del momento en que el usuario interactúa con el video. Este evento es poco confiable, lo cual significa que no puede desencadenar la mayoría de las acciones, y que solamente pueden ejecutarse acciones que se consideren poco confiables, como las de tipo amp-animation.
timeUpdate(poco confiable) Se activa cuando cambia la ubicación del botón de reproducción en un video. AMP controla la frecuencia del evento y actualmente se ajusta en intervalos de 1 segundo. Este evento es poco confiable, lo cual significa que no puede desencadenar la mayoría de las acciones, y que solamente pueden ejecutarse acciones que se consideren poco confiables, como las de tipo amp-animation. {time, percent}time indica el tiempo actual en segundos, percent es un número entre 0 y 1, e indica la posición actual como un porcentaje del tiempo total.

formulario

Evento Descripción Datos
submit Se activa cuando se envía el formulario.
submit-success Se activa cuando la respuesta por enviar el formulario es exitosa. 
// Response JSON.
event.response
submit-error Se activa cuando ocurre un error en la respuesta por enviar el formulario. 
// Response JSON.
event.response
valid Se activa cuando el formulario es válido.
invalid Se activa cuando el formulario no es válido.

Acciones específicas para los elementos

* (todos los elementos)

Acción Descripción
hide Oculta el elemento objetivo.
show Muestra al elemento objetivo. Si como resultado de ello un elementoautofocus se vuelve visible, aumenta su prioridad.
toggleVisibility Habilita o deshabilita la visibilidad del elemento objetivo. Si como resultado de ello un elementoautofocus se vuelve visible, aumenta su prioridad.
toggleClass(class=STRING, force=BOOLEAN) Habilita o deshabilita las clases de un elemento objetivo. El force es opcional y, cuando se define, garantiza que la clase solamente se agregará pero no podrá eliminarse si se establece en true, y solo podrá eliminarse pero no agregarse si se establece en false.
scrollTo(duration=INTEGER, position=STRING) Desplaza la visualización de un elemento con una animación gradual. El elemento
duration es opcional. Especifica la duración de la animación en milisegundos. En caso de que no se especifique, puede utilizarse una cantidad relativa a la diferencia de desplazamiento que sea inferior o igual a 500 milisegundos. El elemento
position también es opcional, pero utiliza alguna de las siguientes etiquetas top, center o bottom (top aparece de forma predeterminada). Especifica la posición relativa que tiene el elemento respecto a la ventana de visualización después del desplazamiento.
focus Hace que el elemento objetivo aumente su prioridad. Para disminuir la prioridad, puede utilizarse focus en otro elemento (generalmente en un elemento primario). Le recomendamos nuevamente que no pierda de vista la prioridad en body/documentElement por cuestiones de accesibilidad.

amp-audio

Acción Descripción
play Reproduce el sonido. No opera si el elemento <amp-audio> es descendiente de <amp-story>.
pause Pone pausa al sonido. No opera si el elemento <amp-audio> es descendiente de <amp-story>.

amp-bodymovin-animation

Acción Descripción
play Reproduce la animación.
pause Pausa la animación.
stop Detiene la animación.
seekTo(time=INTEGER) Establece el tiempo actual de la animación mediante un valor predeterminado y pausa la animación.
seekTo(percent=[0,1]) Utiliza un porcentaje específico para establecer el tiempo actual de la animación mediante un valor predeterminado y pausa la animación.

amp-accordion

Acción Descripción
toggle(section=STRING) Habilita o deshabilita los estados expanded y collapsed en las secciones de amp-accordion. Cuando se hacen llamadas sin argumentos, permite alternar todas las secciones del acordeón. Habilita una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.toggle(section=
expand(section=STRING) Expande las secciones del acordeón. Si una sección ya está expandida permanece de esta manera. Cuando se hacen llamadas sin argumentos, expande todas las secciones del acordeón. Activa una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.expand(section=
collapse(section=STRING) Colapsa las secciones del acordeón. Si una sección ya está colapsada permanece de esta manera. Cuando se hacen llamadas sin argumentos, colapsa todas las secciones del acordeón. Activa una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.collapse(section=

amp-carousel[type="slides"]

Acción Descripción
goToSlide(index=INTEGER) Hace que el carrusel avance hasta una diapositiva específica del índice.
toggleAutoplay(toggleOn=true|false) Habilita o deshabilita el estado de reproducción automática en el carrusel. El elemento toggleOn es opcional.

amp-image-lightbox

Acción Descripción
open (default) Abre la imagen del lightbox, siendo la imagen de origen la que activó dicha acción.

amp-lightbox

Acción Descripción
open (default) Abre el lightbox.
close Cierra el lightbox.
Acción Descripción
open Abre el lightbox-gallery. Puede activarse al presionar otro elemento, si especifica el ID de la imagen: `on="tap:amp-lightbox-gallery.open(id='image-id')"`.

amp-list

Acción Descripción
refresh Actualiza los datos del src y vuelve a renderizar la lista.

amp-live-list

Acción Descripción
update (default) Actualiza los elementos del DOM para mostrar el contenido actualizado.

amp-selector

Acción Descripción
clear Elimina todas las selecciones de un amp-selector definido.
selectUp(delta=INTEGER) Desplaza la selección hacia arriba mediante el valor de “delta”. El valor de “delta” se establece en -1. Si no se selecciona ninguna opción, el estado que seleccione tomará el valor de la última opción.
selectDown(delta=INTEGER) Desplaza la selección hacia abajo mediante el valor de “delta”. El valor de “delta” se establece en 1. Si no se selecciona ninguna opción, el estado que seleccione tomará el valor de la primera opción.
toggle(index=INTEGER, value=BOOLEAN) Habilita o deshabilita la aplicación “seleccionada”. Si el atributo que se seleccionó está ausente, esta acción lo agregará. Si el atributo que se seleccionó está presente, esta acción lo eliminará. Puede forzar y mantener una adición o eliminación incluyendo un valor booleano en el argumento “value”. Un valor “true” forzará agregar el atributo “seleccionado” y no lo removerá si ya está presente. Un valor “false” eliminará el atributo, pero no lo agregará si está ausente.

amp-sidebar

Acción Descripción
open (default) Abre la barra lateral.
close Cierra la barra lateral.
toggle Habilita o deshabilita el estado de la barra lateral.

amp-state

Acción Descripción
refresh Obtiene nuevamente los datos del atributo “src” mientras ignora el caché del navegador.

amp-user-notification

Acción Descripción
dismiss (default) Oculta el elemento que hace referencia a las notificaciones del usuario.

Elementos de video

Las acciones que se muestran a continuación son compatibles en AMP con los siguientes elementos de video: amp-video, amp-youtube, amp-3q-player, amp-brid-player, amp-dailymotion, amp-delight-player, amp-ima-video.

Acción Descripción
play Reproduce el video.
pause Pausa el video.
mute Desactiva el audio del video.
unmute Reactiva el audio del video.
fullscreencenter Adapta el video a la pantalla completa.

formulario

Acción Descripción
clear Elimina cualquier valor en las entradas del formulario.
submit Envía el formulario.

Objetivos especiales

Los siguientes son objetivos proporcionados por el sistema de AMP cuyos requisitos son especiales:

Objetivo: AMP

El objetivo de AMP es proporcionado por el tiempo de ejecución e implementa acciones de nivel superior que se aplican a todo el documento.

Acción Descripción
navigateTo(url=STRING, target=STRING, opener=BOOLEAN)

Navega en la ventana actual hacia una URL determinada o hasta el objetivo opcional que se especificó, si se proporcionó alguno (actualmente solo es compatible con _top y _blank ). El parámetro opcional opener puede especificarse cuando se utiliza un _blank como objetivo para permitir que la página recién abierta acceda a window.opener . Es compatible con las sustituciones estándar en las URL.

Advertencia: Se recomienda utilizar los enlaces normales <a> siempre que sea posible, ya que AMP.navigateTo no es reconocido por los rastreadores web.
closeOrNavigateTo(url=STRING, target=STRING, opener=BOOLEAN)

Su objetivo es tratar de cerrar la ventana, cuando sea posible, de lo contrario permite navegar de manera similar a la acción navigateTo. Es útil para usarse en aquellos casos dónde es necesario cerrar una ventana mediante el botón “Regresar”, cuando se haya abierto una ventana nueva a partir de la página anterior o navegar si no se abrió.

Advertencia: Se recomienda utilizar los enlaces normales <a> siempre que sea posible, ya que AMP.closeOrNavigateTo no es reconocido por los rastreadores web.
goBack Permite navegar hacia atrás en el historial.
print Abre el diálogo de la impresora para imprimir la página actual.
scrollTo(id=STRING, duration=INTEGER, position=STRING) Se desplaza hasta el ID del elemento que se proporcionó en la página actual.
optoutOfCid Excluye la generación de un ID para el cliente en todos los campos.
setState({foo: 'bar'})1

Requiere de amp-bind.

Fusiona un objeto literal con un estado para crear enlaces.
pushState({foo: 'bar'})1

Requiere de amp-bind.

Fusiona un objeto literal con un estado para crear enlaces e inserta una nueva entrada en el conjunto del historial del navegador. Cuando aparezca la entrada, los valores previos de las variables se restablecerán (en este ejemplo, la variable es foo).

1Cuando se utiliza con varias acciones, las acciones que se realicen posteriormente esperarán hasta que setState() o pushState() finalicen antes de invocarlas. Solamente se permite un setState() o pushState() por evento.

Objetivo: amp-access

El componente amp-access proporciona el objetivo amp-access.

El objetivo amp-access es especial por las siguientes razones:

  1. No puede proporcionar una ID arbitraria para este objetivo. El objetivo siempre será amp-access.
  2. Las acciones para amp-access son dinámicas pero dependen de la estructura de la configuración de acceso a AMP.

Consulte la información sobre el uso del objetivo amp-access.