Event

`PopStateEvent`

Creates a new PopStateEvent fired when the active history entry changes while the user navigates the session history

Syntax

JavaScript

new PopStateEvent(type, options?)

Parameters

Parameter	Type	Description
type	string	The type of event (popstate)
options	PopStateEventInit	Options including state

Return Value

A new PopStateEvent object

Examples

Basic Usage

window.addEventListener('popstate', (e: PopStateEvent) => {
  console.log('State:', e.state)
})

Practical Example

window.addEventListener('popstate', (e: PopStateEvent) => {
  const page = e.state?.page || 'home'
  console.log('Navigate to:', page)
  renderPage(page)
})

Advanced Usage

history.pushState({ page: 'about' }, '', '/about')
history.pushState({ page: 'contact' }, '', '/contact')
window.addEventListener('popstate', (e: PopStateEvent) => {
  console.log('Back to:', e.state?.page)
})

Understanding PopStateEvent

The PopStateEvent method in JavaScript creates a new PopStateEvent fired when the active history entry changes while the user navigates the session history. It belongs to the Event object and is one of the most widely used methods for working with event values in modern JavaScript and TypeScript applications.

The method signature is new PopStateEvent(type, options?). It accepts 2 parameters: type, options. When called, it returns a new popstateevent object. Understanding when and how to use PopStateEvent() helps you write more expressive, readable code.

Common use cases for PopStateEvent include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like event-hashchangeevent, event-addeventlistener, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for PopStateEvent is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.