Window: deviceorientation event
The deviceorientation
event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the Earth coordinate frame. This data is gathered from a magnetometer inside the device.
See Orientation and motion data explained for details.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener('deviceorientation', event => { });
ondeviceorientation = event => { };
Event type
An DeviceOrientationEvent
. Inherits from Event
.
Event properties
DeviceOrientationEvent.absolute
Read only-
A boolean that indicates whether the device is providing orientation data absolutely.
DeviceOrientationEvent.alpha
Read only-
A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 (inclusive) to 360 (exclusive).
DeviceOrientationEvent.beta
Read only-
A number representing the motion of the device around the x axis, expressed in degrees with values ranging from -180 (inclusive) to 180 (exclusive). This represents the front to back motion of the device.
DeviceOrientationEvent.gamma
Read only-
A number representing the motion of the device around the y axis, expressed in degrees with values ranging from -90 (inclusive) to 90 (exclusive). This represents the left to right motion of the device.
DeviceOrientationEvent.webkitCompassHeading
Read only-
A number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, expressed in degrees with values ranging from 0 to 360.
DeviceOrientationEvent.webkitCompassAccuracy
Read only-
The accuracy of the compass given as a positive or negative deviation. It's usually 10.
Examples
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", function(event) {
// alpha: rotation around z-axis
var rotateDegrees = event.alpha;
// gamma: left to right
var leftToRight = event.gamma;
// beta: front back motion
var frontToBack = event.beta;
handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
}, true);
}
var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
// do something amazing
};
Specifications
Specification |
---|
DeviceOrientation Event Specification # deviceorientation |
Browser compatibility
BCD tables only load in the browser