ContextQMD
Back to Content

NavigationCurrentEntryChangeEvent

files/en-us/web/api/navigationcurrententrychangeevent/index.md

latest2.6 KB
Original Source

{{APIRef("Navigation API")}}

The NavigationCurrentEntryChangeEvent interface of the {{domxref("Navigation API", "Navigation API", "", "nocode")}} is the event object for the {{domxref("Navigation/currententrychange_event", "currententrychange")}} event, which fires when the {{domxref("Navigation.currentEntry")}} has changed.

This event will fire for same-document navigations (e.g., {{domxref("Navigation.back", "back()")}} or {{domxref("Navigation.traverseTo", "traverseTo()")}}), replacements (i.e., a {{domxref("Navigation.navigate", "navigate()")}} call with history set to replace), or other calls that change the entry's state (e.g., {{domxref("Navigation.updateCurrentEntry", "updateCurrentEntry()")}}, or the {{domxref("History API", "History API", "", "nocode")}}'s {{domxref("History.replaceState()")}}).

This event fires after the navigation is committed, meaning that the visible URL has changed and the {{domxref("NavigationHistoryEntry")}} update has occurred. It is useful for migrating from usage of older API features like the {{domxref("Window/hashchange_event", "hashchange")}} or {{domxref("Window/popstate_event", "popstate")}} events.

{{InheritanceDiagram}}

Constructor

  • {{domxref("NavigationCurrentEntryChangeEvent.NavigationCurrentEntryChangeEvent", "NavigationCurrentEntryChangeEvent()")}}
    • : Creates a new NavigationCurrentEntryChangeEvent object instance.

Instance properties

Inherits properties from its parent, {{DOMxRef("Event")}}.

  • {{domxref("NavigationCurrentEntryChangeEvent.from", "from")}} {{ReadOnlyInline}}
    • : Returns the {{domxref("NavigationHistoryEntry")}} that was navigated from.
  • {{domxref("NavigationCurrentEntryChangeEvent.navigationType", "navigationType")}} {{ReadOnlyInline}}
    • : Returns the type of the navigation that resulted in the change.

Examples

Navigation data reporting:

js
navigation.addEventListener("currententrychange", () => {
  const data = navigation.currentEntry.getState();
  submitAnalyticsData(data.analytics);
});

Setting up a per-entry event:

js
navigation.addEventListener("currententrychange", () => {
  navigation.currentEntry.addEventListener("dispose", genericDisposeHandler);
});

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also