Events and Lifecycle

lifecycle

In Briz, Lifecycle happens automatically within Briz. It automatically initializes data-nav and data-ajax, thus preventing memory leaks. And if you combine it with Leaf, Leaf will automatically initialize when data-scope appears and remove when data-scope disappears from the DOM. This is why we recommend using Briz with Leaf. You can also combine Leaf with HTMX or Briz with AlpineJs.

Events

There are several events in Briz, namely:

  • z:before-request will be executed before the request.
  • z:request-success will be executed after a successful request.
  • z:request-error will be executed after a request-error.
  • z:after-request will be executed after a request, regardless of whether it is an error or a success.
  • z:before-swap will be executed before the swap process.
  • z:after-swap will be executed after the swap process.
  • z:before-navigation will be executed before navigation.
  • z:after-navigation will be executed after navigation.

Example

document.addEventListener("z:before-request", (event) => {
  //it will run before request, example before submit something from <form> tag
  console.log(event.detail)
  //it will show you all the detail event.
})

The main function of all the events above is to run something like loading, or inject headers before the request.

Prev: Real-Time Features