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
(Note that when using jQuery, the data on the event must be accessed as
turbo:clickfires when you click a Turbo-enabled link. The clicked element is the event target. Access the requested location with
event.detail.url. Cancel this event to let the click fall through to the browser as normal navigation.
turbo:before-visitfires before visiting a location, except when navigating by history. Access the requested location with
event.detail.url. Cancel this event to prevent navigation.
turbo:visitfires immediately after a visit starts. Access the requested location with
event.detail.urland action with
turbo:submit-startfires during a form submission. Access the
turbo:before-fetch-requestfires before Turbo issues a network request to fetch the page. Access the requested location with
event.detail.urland the fetch options object with
event.detail.fetchOptions. Request can be canceled and continued with
event.detail.resume(see Pausing Requests).
turbo:before-fetch-responsefires after the network request completes. Access the fetch options object with
turbo:submit-endfires after the form submission-initiated network request completes. Access the
FormSubmissionResultproperties included within
turbo:before-cachefires before Turbo saves the current page to cache.
turbo:before-renderfires before rendering the page. Access the new
event.detail.newBody. Rendering can be canceled and continued with
event.detail.resume(see Pausing Rendering).
turbo:before-stream-renderfires before rendering a Turbo Stream page update.
turbo:renderfires 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:loadfires once after the initial page load, and again after every Turbo visit. Access visit timing metrics with the