Lista de eventos del ciclo de vida de JavaScript
Todos los eventos del ciclo de vida se describen a continuación y están separados por categoría de página. Tenga en cuenta que hay un evento especial que se dispara una sola vez al inicio de la carga del sitio web de la aplicación,cdm-app:ready.
Estos eventos personalizados se activan a nivel de documento, lo que significa que usted puede suscribirse al documento mismo. La aplicación CONTENTdm proporciona un objeto CustomEvent() dentro del ciclo de vida de la aplicación y la representación de la página. El detalle dentro de la función es el dato personalizado o la función que se ejecutará.
Nota: Por favor, consulte los ejemplos de JavaScript y CSS para obtener ejemplos adicionales de personalización.
Aplicación
cdm-app:ready - Disponible una vez que la aplicación esté lista para usar; el primer momento en el ciclo de vida de la aplicación.
Ejemplo:
document.addEventListener('cdm-app:ready', function(e){ // aplicación lista para usar // e es una instancia de CustomEvent });
Página principal
La página de inicio es la página predeterminada de un sitio CONTENTdm que aparece para la URL simple, así como en la ruta /digital/. Esta clase de evento se utiliza para la página de inicio integrada, así como para una página de inicio HTML personalizada.
| Clase de evento | Descripción |
|---|---|
cdm-home-page:ingresar |
La página de inicio está a punto de ser accedida, pero aún no se ha mostrado. |
cdm-home-page:preparado |
La página de inicio está lista para usar. |
cdm-home-page:actualizar |
El estado de la página de inicio se actualiza (p. ej., un usuario navega a una página siguiente/anterior de tarjetas de colección). |
cdm-home-page:salir |
El usuario está a punto de abandonar la página de inicio. |
Ejemplo:
cdm-home-page:ingresar
document.addEventListener('cdm-home-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página de búsqueda
La página de búsqueda se muestra en la ruta /digital/search/. Esta clase de evento se activa solo cuando el alcance de la búsqueda abarca más de una colección.
| Clase de evento | Descripción |
|---|---|
cdm-search-page:ingresar |
La página de búsqueda está a punto de ser ingresada, pero aún no se ha mostrado. |
cdm-search-page:preparado |
La página de búsqueda está lista para su uso. |
cdm-search-page:actualizar |
Se actualiza el estado de la página de búsqueda. |
cdm-search-page:salir |
El usuario está a punto de salir de la página de búsqueda. |
Ejemplo:
cdm-search-page:ingresar
document.addEventListener('cdm-search-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página de búsqueda de colecciones
La página de búsqueda de colecciones es una búsqueda con un alcance de una sola colección. Si la búsqueda se modifica para incluir dos o más colecciones, se activará una clase de evento diferente (cdm-search-page).
| Clase de evento | Descripción |
|---|---|
cdm-collection-search-page:ingresar |
Está a punto de accederse a la página de búsqueda de colecciones, pero aún no se ha renderizado. |
cdm-collection-search-page:ready |
La página de búsqueda de colecciones está lista para usar. |
cdm-collection-search-page:actualizar |
El estado de la página de búsqueda de colecciones se ha actualizado. |
cdm-collection-search-page:salir |
El usuario está a punto de salir de la página de búsqueda de colecciones. |
Ejemplo:
cdm-collection-search-page:ingresar
document.addEventListener('cdm-collection-search-page:enter', function(e){ // e es una instancia de CustomEvent console.log(e.detail); // {collectionId: '...'} // ... });
Página de búsqueda avanzada
| Clase de evento | Descripción |
|---|---|
cdm-advanced-search-page:enter |
Está a punto de acceder a la página de búsqueda avanzada, pero aún no se ha cargado. |
cdm-advanced-search-page:ready |
La página de búsqueda avanzada está lista para usar. |
cdm-advanced-search-page:update |
El estado de la página de búsqueda avanzada se actualiza. |
cdm-advanced-search-page:leave |
El usuario está a punto de salir de la página de búsqueda avanzada. |
Ejemplo:
cdm-advanced-search-page:enter
document.addEventListener('cdm-advanced-search-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página de inicio de la colección
| Clase de evento | Descripción |
|---|---|
cdm-collection-landing-page:ingresar |
Está a punto de ingresarse la página de destino de la colección, pero aún no se ha procesado. |
cdm-collection-landing-page:preparado |
La página de inicio de la colección está lista para su uso. |
cdm-collection-landing-page:actualizar |
El estado de la página de inicio de la colección se ha actualizado. |
cdm-collection-landing-page:salir |
El usuario está a punto de salir de la página de inicio de la colección. |
Ejemplo:
cdm-collection-landing-page:ingresar
document.addEventListener('cdm-collection-landing-page:enter', function(e){ // e es una instancia de CustomEvent console.log(e.detail); // {collectionId: '...'} // ... });
Página del documento
| Clase de evento | Descripción |
|---|---|
cdm-documento-página:entrar |
Está a punto de ingresarse a la página del documento, pero aún no se ha renderizado. |
cdm-documento-página:listo |
La página del documento está lista para ser utilizada. |
página del documento cdm:actualizar |
El estado de la página del documento se actualiza. |
cdm-documento-page:dejar |
El usuario está a punto de salir de la página del documento. |
Ejemplo:
cdm-documento-página:entrar
document.addEventListener('cdm-item-page:enter', function(e){ // e es una instancia de CustomEvent console.log(e.detail); // {collectionId: '...', itemId: '...'} // ... });
Página personalizada
Los eventos de página personalizada se activan solo para páginas donde la URL contiene /custom/. Si ha reemplazado la página de inicio o la página de destino de una colección con un archivo HTML personalizado, esas páginas utilizarán las clases de evento cdm-home-page y cdm-collection-landing-page en su lugar.
| Clase de evento | Descripción |
|---|---|
cdm-página-personalizada:entrar |
La página personalizada está a punto de ser ingresada, pero aún no se ha renderizado. |
cdm-custom-page:ready |
La página personalizada está lista para utilizar. |
cdm-página-personalizada:actualizar |
Se actualiza el estado de la página personalizada. |
cdm-custom-page:salir |
El usuario está a punto de salir de la página personalizada. |
Ejemplo:
cdm-página-personalizada:entrar
document.addEventListener('cdm-custom-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página de información
| Clase de evento | Descripción |
|---|---|
cdm-about-page:enter |
Está a punto de ingresarse a la página Acerca de, pero aún no se ha procesado. |
cdm-about-page:preparado |
La página acerca de está lista para su uso. |
cdm-acerca-de-página:actualizar |
Se ha actualizado el estado de la página Acerca de. |
cdm-about-page:salir |
El usuario está a punto de salir de la página acerca de. |
Ejemplo:
cdm-about-page:enter
document.addEventListener('cdm-about-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página de inicio de sesión
| Clase de evento | Descripción |
|---|---|
cdm-login-page:ingresar |
La página de inicio de sesión está a punto de ser accedida, pero aún no se ha mostrado. |
cdm-login-page:preparado |
La página de inicio de sesión está lista para su uso. |
cdm-login-page:actualizar |
El estado de la página de inicio de sesión se ha actualizado. |
cdm-login-page:salir |
El usuario está a punto de salir de la página de inicio de sesión. |
Ejemplo:
cdm-login-page:ingresar
document.addEventListener('cdm-login-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página no encontrada
| Clase de evento | Descripción |
|---|---|
cdm-notfound-page:enter |
La página no encontrada está a punto de ser accedida pero aún no se ha renderizado. |
cdm-página-no-encontrada:listo |
La página de error 404 está lista para su uso. |
cdm-notfound-page:actualizar |
Se ha actualizado el estado de la página no encontrada. |
cdm-notfound-page:leave |
El usuario está a punto de salir de la página no encontrada. |
Ejemplo:
cdm-notfound-page:enter
document.addEventListener('cdm-notfound-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página de documentos guardados
| Clase de evento | Descripción |
|---|---|
cdm-saved-items-page:enter |
Está a punto de accederse a la página de documentos guardados, pero aún no se ha renderizado. |
cdm-saved-items-page:listo |
La página de documentos guardados está lista para usar. |
cdm-saved-items-page:update |
El estado de la página de documentos guardados se ha actualizado. |
cdm-saved-items-page:dejar |
El usuario está a punto de salir de la página de documentos guardados. |
Ejemplo:
cdm-saved-items-page:enter
document.addEventListener('cdm-saved-items-page:enter', function(e){ // e es una instancia de CustomEvent // ... });
Página de documentos compartidos
| Clase de evento | Descripción |
|---|---|
cdm-shared-items-page:entrar |
Está a punto de accederse a la página de documentos compartidos, pero aún no se ha renderizado. |
cdm-shared-items-page:preparado |
La página de documentos compartidos está lista para usarse. |
cdm-shared-items-page:actualizar |
El estado de la página de documentos compartidos se actualiza. |
cdm-shared-items-page:dejar |
El usuario está a punto de salir de la página de documentos compartidos. |
Ejemplo:
cdm-shared-items-page:entrar
document.addEventListener('cdm-shared-items-page:enter', function(e){ // e es una instancia de CustomEvent // ... });