JavaScript Screen orientationchange Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event

Definition

Screen orientationchange is a legacy instance event that fired when the device orientation changed (MDN). It is a generic Event with no special payload.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for orientationchange. Start with this line.

JavaScript
screen.addEventListener("orientationchange", handler)
CallWhat it does
screen.addEventListener("orientationchange", handler)Primary signature.

Built into the browser. Listen with screen.addEventListener("orientationchange", …) — no import required.

Library declarations
JavaScript
screen.addEventListener("orientationchange", handler)

Parameters

ParameterDescription
change listenerRequired. Fires when the device rotates

Return Value

Return ValueDescription
*Fires as a Screen event (listener receives the event).

JavaScript Examples

Example 1 — Feature-Detect Legacy Hooks

See whether onorientationchange exists on screen.

JavaScript
console.log("onorientationchange" in screen);
console.log(typeof screen.onorientationchange);
console.log("Prefer screen.orientation change");
Try It Yourself

How It Works

  1. Probe the property. "onorientationchange" in screen checks for a legacy handler slot.
  2. Expect missing support. Many modern engines return false / undefined.
  3. Do not rely on it. Absence is normal — the API is deprecated and non-standard.
  4. Next step. Use screen.orientation change for real rotate handling.

Example 2 — Prefer ScreenOrientation change

MDN’s recommended path — listen on screen.orientation.

JavaScript
if (screen.orientation) {
  screen.orientation.addEventListener("change", function (event) {
    console.log(
      "ScreenOrientation change: " +
        event.target.type +
        ", " +
        event.target.angle +
        " degrees."
    );
  });
  console.log("Listening for orientation change…");
} else {
  console.log("screen.orientation not available");
}
Try It Yourself

How It Works

  1. Guard the API. Confirm screen.orientation exists before attaching.
  2. Listen for change. The event lives on ScreenOrientation, not on legacy Screen.
  3. Read the target. event.target.type and .angle show the new orientation.
  4. Rotate to test. On a phone or emulator, turn the device to fire the handler.

Example 3 — Legacy Listen Shape (Educational)

MDN’s old form — attach safely; it may never fire today.

JavaScript
try {
  screen.addEventListener("orientationchange", function () {
    console.log("legacy Screen orientationchange fired");
  });
  console.log("Attached (may never fire — deprecated)");
} catch (err) {
  console.log("Could not attach: " + err.name);
}
Try It Yourself

How It Works

  1. Show the old API. addEventListener("orientationchange", …) matches MDN’s legacy syntax.
  2. Wrap in try/catch. Some environments may reject unexpected listeners.
  3. Expect silence. Attaching does not guarantee the event will fire on modern browsers.
  4. Migration rule. Replace this with Example 2 before shipping.

Browser Support

Screen orientationchange is Deprecated and Non-standard (MDN). Prefer screen.orientation change, which is Baseline Widely available (since March 2023).

✓ Deprecated · Non-standard

Screen orientationchange

Legacy rotate event — do not rely on it. Use ScreenOrientation.change instead.

Legacy Avoid in new apps
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
orientationchange Deprecated

Bottom line: Feature-detect only when migrating old code. New apps should use screen.orientation.addEventListener("change", …) and keep responsive CSS as a fallback.

Frequently Asked Questions

It is a deprecated, non-standard event that fired when the device orientation changed. Prefer the ScreenOrientation change event on screen.orientation instead.
MDN marks Screen: orientationchange as Deprecated and Non-standard. It is not Experimental. Do not use it in new code.
Listen for change on screen.orientation: screen.orientation.addEventListener("change", handler). That is the Screen Orientation API path MDN recommends.
Use addEventListener("orientationchange", handler) or the onorientationchange property on Screen (and historically also on window).
A generic Event. Re-read orientation details after it fires, or use the modern API’s type and angle.
Related legacy ideas. Window: orientationchange is also deprecated. Screen: orientationchange is additionally Non-standard. Prefer ScreenOrientation.change for both migration paths.

Next: JavaScript Window

Explore the Window object and browser APIs next.

Window tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

11 people found this page helpful