recursal/MDN huggingface dataset:
MediaQueryList: removeListener() method
=======================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`removeListener()`** method of the
 `MediaQueryList` interface removes a listener from the
 `MediaQueryListener`.

 In older browsers `MediaQueryList` did not yet inherit from `EventTarget`,
 so this method was provided as an alias of `EventTarget.removeEventListener()`.
 Use `removeEventListener()` instead of `removeListener()` if it is
 available in the browsers you need to support.

Syntax
------


```js
removeListener(func)
```

### Parameters

`func`

 A function or function reference representing the callback function you want to
 remove.


### Return value

None (`undefined`).

Examples
--------


```js
const paragraph = document.querySelector("p");
const mediaQueryList = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /\* the viewport is 600 pixels wide or less \*/
    paragraph.textContent = "This is a narrow screen — 600px wide or less.";
    document.body.style.backgroundColor = "pink";
  } else {
    /\* the viewport is more than 600 pixels wide \*/
    paragraph.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "aquamarine";
  }
}

mediaQueryList.addListener(screenTest);

// Later on, when it is no longer needed
mediaQueryList.removeListener(screenTest);
```

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-removelistener |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryList: media property
==============================

 The **`media`** read-only property of the
 `MediaQueryList` interface is a string representing a
 serialized media query.

Value
-----

A string representing a serialized media query.

Examples
--------

 This example runs the media query `(max-width: 600px)` and displays the
 value of the resulting `MediaQueryList`'s `media` property in a
 `<span>`.

### JavaScript


```js
let mql = window.matchMedia("(max-width: 600px)");

document.querySelector(".mq-value").innerText = mql.media;
```


 The JavaScript code passes the media query to match into `matchMedia()` to compile it, then sets the `<span>`'s
 `innerText` to the value of the result's
 `media` property.

### HTML


```html
<span class="mq-value"></span>
```


A simple `<span>` to receive the output.
```

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #88f;
  padding: 0.4em;
  border: 1px solid #dde;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-media |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryList: matches property
================================

 The **`matches`** read-only property of the
 `MediaQueryList` interface is a boolean value that returns
 `true` if the `document` currently matches the media query list,
 or `false` if not.

 You can be notified when the value of `matches` changes by watching for the
 `change` event to be fired at the
 `MediaQueryList`.

Value
-----

 A boolean value that is `true` if the `document`
 currently matches the media query list; otherwise, it's `false`.

Examples
--------

 This example detects viewport orientation changes by creating a media query using the
 `orientation` media
 feature:


```js
const mql = window.matchMedia("(orientation:landscape)");
mql.addEventListener("change", (event) => {
  if (event.matches) {
    console.log("Now in landscape orientation");
  } else {
    console.log("Now in portrait orientation");
  }
});
```

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-matches |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryList: change event
============================

The **`change`** event of the `MediaQueryList` interface fires when the status of media query support changes.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("change", (event) => {});

onchange = (event) => {};
```

Event type
----------

A `MediaQueryListEvent`. Inherits from `Event`.

Event

MediaQueryListEventEvent properties
----------------

*The `MediaQueryListEvent` interface inherits properties from its parent interface, `Event`.*

`MediaQueryListEvent.matches` Read only 

A boolean value that is `true` if the `document` currently matches the media query list, or `false` if not.

`MediaQueryListEvent.media` Read only 

A string representing a serialized media query.

Example
-------


```js
const mql = window.matchMedia("(max-width: 600px)");

mql.onchange = (e) => {
  if (e.matches) {
    /\* the viewport is 600 pixels wide or less \*/
    console.log("This is a narrow screen — less than 600px wide.");
  } else {
    /\* the viewport is more than 600 pixels wide \*/
    console.log("This is a wide screen — more than 600px wide.");
  }
};
```

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-onchange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryList: addListener() method
====================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The deprecated **`addListener()`** method of the
 `MediaQueryList` interface adds a listener to the
 `MediaQueryListener` that will run a custom callback function in response to
 the media query status changing.

 In older browsers `MediaQueryList` did not yet inherit from `EventTarget`,
 so this method was provided as an alias of `EventTarget.addEventListener()`.
 Use `addEventListener()` instead of `addListener()` if it is
 available in the browsers you need to support.

Syntax
------


```js
addListener(func)
```

### Parameters

`func`

 A function or function reference representing the callback function you want to run
 when the media query status changes.


### Return value

None (`undefined`).

Examples
--------


```js
const paragraph = document.querySelector("p");
const mediaQueryList = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /\* the viewport is 600 pixels wide or less \*/
    paragraph.textContent = "This is a narrow screen — 600px wide or less.";
    document.body.style.backgroundColor = "pink";
  } else {
    /\* the viewport is more than 600 pixels wide \*/
    paragraph.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "aquamarine";
  }
}

mediaQueryList.addListener(screenTest);
```

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-addlistener |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Media queries
* Using media queries from code
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
LaunchParams: files property
============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`files`** read-only property of the `LaunchParams` interface returns an array of `FileSystemHandle` objects representing any files passed along with the launch navigation via the `POST` method.

Value
-----

A read-only array of `FileSystemHandle` objects.

Examples
--------


```js
if ("launchQueue" in window) {
  window.launchQueue.setConsumer((launchParams) => {
    if (launchParams.files) {
      const files = launchParams.files;
      for (file in files) {
        // Do stuff with file handles
      }
    }
  });
}
```

Specifications
--------------

| Specification |
| --- |
| Web App Launch Handler API # ref-for-dom-launchparams-files-1 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Launch Handler API: Control how your app is launched
* `Window.launchQueue`
* Musicr 2.0 demo app
LaunchParams: targetURL property
================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`targetURL`** read-only property of the `LaunchParams` interface returns the target URL of the associated web app launch.

Value
-----

A string.

Examples
--------


```js
if ("launchQueue" in window) {
  window.launchQueue.setConsumer((launchParams) => {
    if (launchParams.targetURL) {
      const params = new URL(launchParams.targetURL).searchParams;

      // Assuming a music player app that gets a track passed to it to be played
      const track = params.get("track");
      if (track) {
        audio.src = track;
        title.textContent = new URL(track).pathname.substr(1);
        audio.play();
      }
    }
  });
}
```

Specifications
--------------

| Specification |
| --- |
| Web App Launch Handler API # ref-for-dom-launchparams-targeturl-7 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Launch Handler API: Control how your app is launched
* `Window.launchQueue`
* Musicr 2.0 demo app
ScrollTimeline: axis property
=============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`axis`** read-only property of the
 `ScrollTimeline` interface returns an enumerated value representing the scroll axis that is driving the progress of the timeline.

Value
-----

An enumerated value. Possible values are:

`"block"`

The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `"y"`, while for vertical writing modes, it is the same as `"x"`.

`"inline"`

The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as `"x"`, while for vertical writing modes, this is the same as `"y"`.

`"y"`

The scrollbar on the vertical axis of the scroll container.

`"x"`

The scrollbar on the horizontal axis of the scroll container.

Examples
--------

See the main `ScrollTimeline` page for an example.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # dom-scrolltimeline-axis |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `ScrollTimeline`
* `AnimationTimeline`, `ViewTimeline`
* Web Animations API
* CSS scroll-driven animations
ScrollTimeline: ScrollTimeline() constructor
============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`ScrollTimeline()`** constructor creates a new `ScrollTimeline` object instance.

Syntax
------


```js
new ScrollTimeline(options)
```

### Parameters

`options`

An object that can contain the following properties:

`source`

A reference to an `Element` representing the scrollable element (*scroller*) whose scroll position will drive the progress of the timeline.

`axis` Optional

An enumerated value representing the scroll axis that will drive the progress of the timeline. Possible values are:

* `"block"`: The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `"y"`, while for vertical writing modes, it is the same as `"x"`.
* `"inline"`: The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as `"x"`, while for vertical writing modes, this is the same as `"y"`.
* `"y"`: The scrollbar on the vertical axis of the scroll container.
* `"x"`: The scrollbar on the horizontal axis of the scroll container.

If omitted, `axis` defaults to `"block"`.


### Return value

A new `ScrollTimeline` object instance.

Examples
--------

See the main `ScrollTimeline` page for an example.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # dom-scrolltimeline-scrolltimeline |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* CSS scroll-driven animations
* `ScrollTimeline`
* `AnimationTimeline`, `ViewTimeline`
ScrollTimeline: source property
===============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`source`** read-only property of the
 `ScrollTimeline` interface returns a reference to the scrollable element (*scroller*) whose scroll position is driving the progress of the timeline and therefore the animation.

Value
-----

An `Element`.

Examples
--------

See the main `ScrollTimeline` page for an example.

Specifications
--------------

| Specification |
| --- |
| Scroll-driven Animations # dom-scrolltimeline-source |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* CSS scroll-driven animations
* `ScrollTimeline`
* `AnimationTimeline`, `ViewTimeline`
WakeLock: request() method
==========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`request()`** method of the `WakeLock` interface returns a `Promise` that fullfills with a `WakeLockSentinel` object if the system screen wake lock is granted.

The screen wake lock prevents device screens from dimming or locking when an application needs to keep running.

Syntax
------


```js
request(type)
```

### Parameters

`type` Optional

A string specifying the screen wake lock type, from among the following enumerated types:

`screen`

 Prevents the screen from turning off.
 Only visible documents can acquire the screen wake lock.




If no `type` parameter is explicitly specified, the `request()` method defaults to using the `screen` type.

### Return value

A `Promise` that resolves with a `WakeLockSentinel` object.

### Exceptions

`NotAllowedError` `DOMException`

Thrown when wake lock is not available, which can happen because:

* Use of this feature is blocked by a Permissions Policy.
* The document is not fully active.
* The document's visibility state is `hidden`.
* The User Agent could not acquire platform's wake lock.
 For example, this might happen if the device is low on battery.

Examples
--------

 The following asynchronous function requests a `WakeLockSentinel` object.
 The `request()` method is wrapped in a `try...catch` statement to handle cases where the browser refuses the request for any reason.


```js
const requestWakeLock = async () => {
  try {
    const wakeLock = await navigator.wakeLock.request("screen");
  } catch (err) {
    // The wake lock request fails - usually system-related, such as low battery.

    console.log(`${err.name}, ${err.message}`);
  }
};

requestWakeLock();
```


 The screen wake lock may be revoked by the device after it has been granted.
 The returned `WakeLockSentinel` can be used to check the status of the lock, and/or to manually cancel a held screen wake lock.

Specifications
--------------

| Specification |
| --- |
| Screen Wake Lock API # the-request-method |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Stay awake with the Screen Wake Lock API
WebSocket: bufferedAmount property
==================================

 The **`WebSocket.bufferedAmount`** read-only property returns
 the number of bytes of data that have been queued using calls to `send()` but
 not yet transmitted to the network. This value resets to zero once all queued data has
 been sent. This value does not reset to zero when the connection is closed; if you keep
 calling `send()`, this will continue to climb.

Value
-----

An `unsigned long`.

Specifications
--------------

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-bufferedamount① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebSocket: extensions property
==============================

 The **`WebSocket.extensions`** read-only property returns the
 extensions selected by the server. This is currently only the empty string or a list of
 extensions as negotiated by the connection.

Value
-----

A string.

Specifications
--------------

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-extensions① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebSocket: message event
========================

The `message` event is fired when data is received through a `WebSocket`.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

Event type
----------

A `MessageEvent`. Inherits from `Event`.

Event

MessageEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`data` Read only 

The data sent by the message emitter. The type of this property depends on the type of the WebSocket message and the value of `WebSocket.binaryType`.

* If the message type is "text", then this field is a string.
* If the message type is "binary" type, then the type of this property can be inferred from the `binaryType` of this socket:
    + `ArrayBuffer` if `binaryType` is `"arraybuffer"`,
    + `Blob` if `binaryType` is `"blob"`. This does not have an associated media type (`Blob.type` is `""`).

`origin` Read only 

A string representing the origin of the message emitter.

Other properties from the `MessageEvent` interface are present, but do not pertain to the WebSocket API and are left at their default values:

* `lastEventId` Read only
* `source` Read only
* `ports` Read only
Examples
--------


```js
// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Listen for messages
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});
```

Specifications
--------------

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onmessage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebSocket: close event
* WebSocket: error event
* WebSocket: open event
* Writing WebSocket client applications
WebSocket: protocol property
============================

 The **`WebSocket.protocol`** read-only property returns the
 name of the sub-protocol the server selected; this will be one of the strings specified
 in the `protocols` parameter when creating the `WebSocket`
 object, or the empty string if no connection is established.

Value
-----

A string.

Specifications
--------------

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-protocol① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebSocket: WebSocket() constructor
==================================

 The **`WebSocket()`** constructor returns a new
 `WebSocket` object.

Syntax
------


```js
new WebSocket(url)
new WebSocket(url, protocols)
```

### Parameters

`url`

 The URL to which to connect; this should be the URL to which the WebSocket server
 will respond.


`protocols` Optional

 Either a single protocol string or an array of protocol strings. These strings are
 used to indicate sub-protocols, so that a single server can implement multiple
 WebSocket sub-protocols (for example, you might want one server to be able to handle
 different types of interactions depending on the specified `protocol`).


If it is omitted, an empty array is used by default, i.e. `[]`.

### Exceptions

`SyntaxError` `DOMException`

Thrown if:

* parsing of `url` fails
* `url` has a scheme other than `ws` or `wss`
* `url` has a fragment
* any of the values in `protocols` occur more than once, or otherwise fail to match the requirements for elements that comprise the value of `Sec-WebSocket-Protocol` fields as defined by the WebSocket Protocol specification

Specifications
--------------

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-websocket① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* RFC 6455 (the WebSocket Protocol specification)