mozilla
Your Search Results

    Using Light Events

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The ambient light events are a handy way to make a web page or an application aware of any change in the light intensity. It allows them to react to such a change, for example by changing the color contrast of the User Interface (UI) or by changing the exposure necessary to take a picture.

    Light Events

    When the light sensor of a device detects a change in the light level, it notifies the browser of that change. When the browser gets such a notification, it fires a DeviceLightEvent event that provides information about the exact light intensity.

    This event can be captured at the window object level by using the addEventListener method (using the devicelight event name) or by attaching an event handler to the window.ondevicelight property.

    Once captured, the event object gives access to the light intensity expressed in lux through the DeviceLightEvent.value property.

    Example

    window.addEventListener('devicelight', function(event) {
      var html = document.getElementsByTagName('html')[0];
    
      if (event.value < 50) {
        html.classList.add('darklight');
        html.classList.remove('brightlight');
      } else {
        html.classList.add('brightlight');
        html.classList.remove('darklight');
      }
    });

    Specifications

    Specification Status Comment
    Ambient Light Events
    The definition of 'Ambient Light Events' in that specification.
    Candidate Recommendation Initial specification

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    DeviceLightEvent Not supported 22.0 (22.0) (Mac OS X only) Not supported Not supported Not supported
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    DeviceLightEvent Not supported Not supported 15.0 (15.0) Not supported Not supported Not supported

    Gecko notes

    The devicelight event is implemented and preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see bug 754199).

    See also

    Document Tags and Contributors

    Contributors to this page: SpencerG, daviddoran, riju, teoli, Jeremie
    Last updated by: riju,