Skip to main content
OCLC Support

List of 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

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

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
    // ...
});

 

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 page

These events can be used generically for all collection-level pages.

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

cdm-collection-page:enter

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

 

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: '...'}
    // ...
});

 

Collection 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: '...'}
    // ...
});

 

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

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
    // ...
});

 

  • Was this article helpful?