Skip to main content
OCLC Support

List of JavaScript lifecycle events

Find a list of the JavaScript lifecycle events.

All of the lifecycle events are described below and separated by page category. Note that there is one special event that fires only once at the beginning of the load of the application website,cdm-app:ready.

These custom events fire at the document level, which means you can subscribe to the document itself. The CONTENTdm application provides a CustomEvent() object within the lifecycle of the application and page render. The detail within the function is the custom data or function to be executed.

 Note:  Please see JavaScript and CSS examples for additional customization examples. 

Application

cdm-app:ready  - Available once the application is ready to use; the earliest time point in the application lifecycle.

Example:

document.addEventListener('cdm-app:ready', function(e){
    // application ready to use 
    // e is instance of CustomEvent 
});

Home page

The home page is the default page of a CONTENTdm site that appears for the bare URL, as well as at the /digital/ path. This event class is used for the built-in home page, as well as a custom HTML home page.

Event class Description
cdm-home-page:enter The home page is about to be entered but has not yet rendered.
cdm-home-page:ready The home page is ready to use.
cdm-home-page:update The home page state is updated (e.g., a user navigates to a next/previous page of collection cards).
cdm-home-page:leave The home page is about to be exited by the user.

Example:

cdm-home-page:enter 

document.addEventListener('cdm-home-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Search page

The search page renders at the /digital/search/ path. This event class is fired only when the collection scope of the search is for more than one collection.

Event class Description
cdm-search-page:enter The search page is about to be entered but has not yet rendered.
cdm-search-page:ready The search page is ready to use.
cdm-search-page:update The search page state is updated.
cdm-search-page:leave The search page is about to be exited by the user.

Example:

cdm-search-page:enter

document.addEventListener('cdm-search-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Collection search page

The collection search page is a search that has a single-collection scope. If the search is modified to have two or more collections, then a different event class will be triggered (cdm-search-page).

Event class Description
cdm-collection-search-page:enter The collection search page is about to be entered but has not yet rendered.
cdm-collection-search-page:ready The collection search page is ready to use.
cdm-collection-search-page:update The collection search page state is updated.
cdm-collection-search-page:leave The collection search page is about to be exited by the user.

Example:

cdm-collection-search-page:enter

document.addEventListener('cdm-collection-search-page:enter', function(e){
    // e is instance of CustomEvent
    console.log(e.detail); // {collectionId: '...'}
    // ...
});

Advanced search page

Event class Description
cdm-advanced-search-page:enter The advanced search page is about to be entered but has not yet rendered.
cdm-advanced-search-page:ready The advanced search page is ready to use.
cdm-advanced-search-page:update The advanced search page state is updated.
cdm-advanced-search-page:leave The advanced search page is about to be exited by the user.

Example:

cdm-advanced-search-page:enter

document.addEventListener('cdm-advanced-search-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Collection landing page

Event class Description
cdm-collection-landing-page:enter The collection landing page is about to be entered but has not yet rendered.
cdm-collection-landing-page:ready The collection landing page is ready to use.
cdm-collection-landing-page:update The collection landing page state is updated.
cdm-collection-landing-page:leave The collection landing page is about to be exited by the user.

Example:

cdm-collection-landing-page:enter 

document.addEventListener('cdm-collection-landing-page:enter', function(e){
    // e is instance of CustomEvent
    console.log(e.detail); // {collectionId: '...'}
    // ...
});

Item page

Event class Description
cdm-item-page:enter The item page is about to be entered but has not yet rendered.
cdm-item-page:ready The item page is ready to use.
cdm-item-page:update The item page state is updated.
cdm-item-page:leave The item page is about to be exited by the user.

Example:

cdm-item-page:enter

document.addEventListener('cdm-item-page:enter', function(e){
    // e is instance of CustomEvent
    console.log(e.detail); // {collectionId: '...', itemId: '...'}
    // ...
});

Custom page

The custom page events are triggered only for pages where the URL contains /custom/. If you have replaced the home page or a collection landing page with a custom HTML file, those pages will use the cdm-home-page and cdm-collection-landing-page event classes instead.

Event class Description
cdm-custom-page:enter The custom page is about to be entered but has not yet rendered.
cdm-custom-page:ready The custom page is ready to use.
cdm-custom-page:update The custom page state is updated.
cdm-custom-page:leave The custom page is about to be exited by the user.

Example:

cdm-custom-page:enter

document.addEventListener('cdm-custom-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

About page

Event class Description
cdm-about-page:enter The about page is about to be entered but has not yet rendered.
cdm-about-page:ready The about page is ready to use.
cdm-about-page:update The about page state is updated.
cdm-about-page:leave The about page is about to be exited by the user.

Example:

cdm-about-page:enter

document.addEventListener('cdm-about-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Login page

Event class Description
cdm-login-page:enter The login page is about to be entered but has not yet rendered.
cdm-login-page:ready The login page is ready to use.
cdm-login-page:update The login page state is updated.
cdm-login-page:leave The login page is about to be exited by the user.

Example:

cdm-login-page:enter

document.addEventListener('cdm-login-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Not found page

Event class Description
cdm-notfound-page:enter The not found page is about to be entered but has not yet rendered.
cdm-notfound-page:ready The not found page is ready to use.
cdm-notfound-page:update The not found page state is updated.
cdm-notfound-page:leave The not found page is about to be exited by the user.

Example:

cdm-notfound-page:enter

document.addEventListener('cdm-notfound-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Saved Items page 

Event class Description
cdm-saved-items-page:enter The saved items page is about to be entered but has not yet rendered.
cdm-saved-items-page:ready The saved items page is ready to use.
cdm-saved-items-page:update The saved items page state is updated.
cdm-saved-items-page:leave The saved items page is about to be exited by the user.

Example:

cdm-saved-items-page:enter

document.addEventListener('cdm-saved-items-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Shared Items page

Event class Description
cdm-shared-items-page:enter The shared items page is about to be entered but has not yet rendered.
cdm-shared-items-page:ready The shared items page is ready to use.
cdm-shared-items-page:update The shared items page state is updated.
cdm-shared-items-page:leave The shared items page is about to be exited by the user.

Example:

cdm-shared-items-page:enter

document.addEventListener('cdm-shared-items-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});