Events
Turbo emits events that allow you to track the navigation lifecycle and respond to page loading. Except where noted, Turbo fires events on the document.documentElement
object (i.e., the <html>
element).
(Note that when using jQuery, the data on the event must be accessed as $event.originalEvent.detail
.)
-
turbo:click
fires when you click a Turbo-enabled link. The clicked element is the event target. Access the requested location withevent.detail.url
. Cancel this event to let the click fall through to the browser as normal navigation. -
turbo:before-visit
fires before visiting a location, except when navigating by history. Access the requested location withevent.detail.url
. Cancel this event to prevent navigation. -
turbo:visit
fires immediately after a visit starts. -
turbo:submit-start
fires during a form submission. Access theFormSubmission
object withevent.detail.formSubmission
. -
turbo:before-fetch-request
fires before Turbo issues a network request to fetch the page. Access the fetch options object withevent.detail
. -
turbo:before-fetch-response
fires after the network request completes. Access the fetch options object withevent.detail
. -
turbo:submit-end
fires after the form submission-initiated network request completes. Access theFormSubmission
object withevent.detail.formSubmission
along withFormSubmissionResult
properties included withinevent.detail
. -
turbo:before-cache
fires before Turbo saves the current page to cache. -
turbo:before-render
fires before rendering the page. Access the new<body>
element withevent.detail.newBody
. -
turbo:before-stream-render
fires before rendering a Turbo Stream page update. -
turbo:render
fires after Turbo renders the page. This event fires twice during an application visit to a cached location: once after rendering the cached version, and again after rendering the fresh version. -
turbo:load
fires once after the initial page load, and again after every Turbo visit. Access visit timing metrics with theevent.detail.timing
object.