recursal/MDN huggingface dataset:
Event: type property
====================

 The **`type`** read-only property of the `Event`
 interface returns a string containing the event's type. It is set when the event is
 constructed and is the name commonly used to refer to the specific event, such as
 `click`, `load`, or `error`.

Value
-----

A string containing the type of `Event`.

Example
-------

 This example logs the event type whenever you press a keyboard key or click a mouse
 button.

### HTML


```html
<p>Press any key or click the mouse to get the event type.</p>
<p id="log"></p>
```

### JavaScript


```js
function getEventType(event) {
  const log = document.getElementById("log");
  log.innerText = `${event.type}\n${log.innerText}`;
}

// Keyboard events
document.addEventListener("keydown", getEventType, false); // first
document.addEventListener("keypress", getEventType, false); // second
document.addEventListener("keyup", getEventType, false); // third

// Mouse events
document.addEventListener("mousedown", getEventType, false); // first
document.addEventListener("mouseup", getEventType, false); // second
document.addEventListener("click", getEventType, false); // third
```

### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |

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

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

See also
--------

* `EventTarget.addEventListener()`
* `EventTarget.removeEventListener()`
Event: cancelBubble property
============================

**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 **`cancelBubble`** property of the `Event`
 interface is deprecated. Use `Event.stopPropagation()` instead.
 Setting its value to `true` before returning from an event handler prevents propagation
 of the event. In later implementations, setting this to `false` does nothing.
 See Browser compatibility for details.

Value
-----

A boolean value. The value `true` means that the event must not be propagated further.

Example
-------


```js
elem.onclick = (event) => {
  // Do cool things here
  event.cancelBubble = true;
};
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelbubble① |

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

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

 The read-only **`target`** property of the
 `Event` interface is a reference to the object onto which the event was
 dispatched. It is different from `Event.currentTarget` when the event
 handler is called during the bubbling or capturing phase of the event.

Value
-----

The associated `EventTarget`.

Example
-------

The `event.target` property can be used in order to implement **event
delegation**.


```js
// Make a list
const ul = document.createElement("ul");
document.body.appendChild(ul);

const li1 = document.createElement("li");
const li2 = document.createElement("li");
ul.appendChild(li1);
ul.appendChild(li2);

function hide(evt) {
  // evt.target refers to the clicked <li> element
  // This is different than evt.currentTarget, which would refer to the parent <ul> in this context
  evt.target.style.visibility = "hidden";
}

// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener("click", hide, false);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

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

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

See also
--------

* Comparison of Event Targets
Event: currentTarget property
=============================

The **`currentTarget`** read-only property of the `Event` interface identifies the element to which the event handler has been attached.

This will not always be the same as the element on which the event was fired, because the event may have fired on a descendant of the element with the handler, and then bubbled up to the element with the handler. The element on which the event was fired is given by `Event.target`.

Value
-----

An `EventTarget` representing the object to which the current event handler is attached.

Examples
--------

### currentTarget versus target

This example illustrates the difference between `currentTarget` and `target`.

#### HTML

The page has a "parent" `<div>` containing a "child" `<div>`.


```html
<div id="parent">
  Click parent
  <div id="child">Click child</div>
</div>

<button id="reset">Reset</button>
<pre id="output"></pre>
```


```
button,
div,
pre {
  margin: 0.5rem;
}

div {
  padding: 1rem;
  border: 1px solid black;
}
```


#### JavaScript

The event handler is attached to the parent. It logs the value of `event.currentTarget` and `event.target`.

We also have a "Reset" button that just reloads the example.


```js
const output = document.querySelector("#output");
const parent = document.querySelector("#parent");
parent.addEventListener("click", (event) => {
  const currentTarget = event.currentTarget.getAttribute("id");
  const target = event.target.getAttribute("id");
  output.textContent = `Current target: ${currentTarget}\n`;
  output.textContent += `Target: ${target}`;
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```


#### Result

If you click inside the child `<div>`, then `target` identifies the child. If you click inside the parent `<div>`, then `target` identifies the parent.

In both cases, `currentTarget` identifies the parent, because that's the element that the handler is attached to.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-currenttarget② |

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

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

See also
--------

* Comparison of Event Targets
* Event bubbling
Event: Event() constructor
==========================

The **`Event()`** constructor creates a new `Event` object. An event created in this way is called a *synthetic event*, as opposed to an event fired by the browser, and can be dispatched by a script.

Syntax
------


```js
new Event(type)
new Event(type, options)
```

### Values

`type`

A string with the name of the event.

`options` Optional

An object with the following properties:

`bubbles` Optional

 A boolean value indicating whether the event bubbles. The default is
 `false`.


`cancelable` Optional

 A boolean value indicating whether the event can be cancelled. The
 default is `false`.


`composed` Optional

 A boolean value indicating whether the event will trigger listeners
 outside of a shadow root (see `Event.composed` for more details). The
 default is `false`.



### Return value

A new `Event` object.

Example
-------


```js
// create a look event that bubbles up and cannot be canceled

const evt = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(evt);

// event can be dispatched from any element, not only the document
myDiv.dispatchEvent(evt);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

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

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

See also
--------

* `Event`
* `EventTarget.dispatchEvent()`
* Creating and triggering events
Event: originalTarget property
==============================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The read-only **`originalTarget`** property of the `Event` interface returns the original target of the event before any retargetings. Unlike `Event.explicitOriginalTarget` it can also be native anonymous content.

See also Comparison of Event Targets.

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

*This is a Mozilla-specific property and is not part of any current specification. It is not on track to become a standard.*

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

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

**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 **`Event.srcElement`** is an alias for the `Event.target` property. Use `Event.target` instead.

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

| Specification |
| --- |
| DOM Standard # dom-event-srcelement |

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

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

See also
--------

* `Window.event`
Event: stopPropagation() method
===============================

 The **`stopPropagation()`** method of the `Event`
 interface prevents further propagation of the current event in the capturing and
 bubbling phases. It does not, however, prevent any default behaviors from occurring; for
 instance, clicks on links are still processed. If you want to stop those behaviors, see
 the `preventDefault()` method. It also does not
 prevent propagation to other event-handlers of the current element. If you want to stop those,
 see `stopImmediatePropagation()`.

Syntax
------


```js
event.stopPropagation()
```

### Parameters

None.

### Return value

None.

Examples
--------

 See Event Propagation.
 Also see the example at `stopImmediatePropagation()`

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stoppropagation① |

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

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

The **`timeStamp`** read-only property of the `Event` interface returns the time (in milliseconds) at which the event was created.

Value
-----

 This value is the number of milliseconds elapsed from the beginning of the time origin until the event was created.
 If the global object is `Window`, the time origin is the moment the user clicked on the link, or the script that initiated the loading of the document.
 In a worker, the time origin is the moment of creation of the worker.

The value is a `DOMHighResTimeStamp` accurate to 5 microseconds (0.005 ms), but the precision is reduced to prevent fingerprinting.

Example
-------

### HTML


```html
<p>
  Focus this iframe and press any key to get the current timestamp for the
  keypress event.
</p>
<p>timeStamp: <span id="time">-</span></p>
```

### JavaScript


```js
function getTime(event) {
  const time = document.getElementById("time");
  time.firstChild.nodeValue = event.timeStamp;
}
document.body.addEventListener("keypress", getTime);
```

### Result

Reduced time precision
----------------------

To offer protection against timing attacks and fingerprinting, the precision of `Event.timeStamp` might get rounded depending on browser settings.

In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by default and defaults to 2ms.


```js
// reduced time precision in Firefox (default: 2ms)
event.timeStamp;
// 9934
// 10362
// 11670
// …
```


In Firefox, if you also enable `privacy.resistFingerprinting`, the precision will be 100ms or the value of `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever is larger.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-timestamp① |

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

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

The **`bubbles`** read-only property of the `Event` interface indicates whether the event bubbles up through the DOM tree or not.

**Note:** See Event bubbling and capture for more information on bubbling.

Value
-----

A boolean value, which is `true` if the event bubbles up through the DOM tree.

Example
-------


```js
function handleInput(e) {
  // Check whether the event bubbles passes the event along
  if (!e.bubbles) {
    passItOn(e);
  }

  // Already bubbling
  doOutput(e);
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-bubbles③ |

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

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

See also
--------

* `stopPropagation()` to prevent further propagation of the current event in the capturing and bubbling phases
* `stopImmediatePropagation()` to not call any further listeners for the same event at the same level in the DOM
* `preventDefault()` to allow propagation to continue but to disallow the browser to perform its default action should no listeners handle the event
Event: isTrusted property
=========================

 The **`isTrusted`** read-only property of the
 `Event` interface is a boolean value that is `true`
 when the event was generated by a user action, and `false` when the event was
 created or modified by a script or dispatched via
 `EventTarget.dispatchEvent()`.

Value
-----

A boolean value.

Example
-------


```js
if (e.isTrusted) {
  /\* The event is trusted \*/
} else {
  /\* The event is not trusted \*/
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-istrusted① |

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

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

 The **`cancelable`** read-only property of the `Event` interface indicates whether the event
 can be canceled, and therefore prevented as if the event never happened.

 If the event is *not* cancelable, then its `cancelable` property will be
 `false` and the event listener cannot stop the event from occurring.

 Most browser-native events that can be canceled are the ones that result from the user
 interacting with the page. Canceling the `click`,
 `wheel`, or
 `beforeunload` events would prevent the user
 from clicking on something, scrolling the page with the mouse wheel, or
 navigating away from the page, respectively.

Synthetic events created by other JavaScript
 code define if they can be canceled when they are created.

 To cancel an event, call the `preventDefault()`
 method on the event. This keeps the implementation from executing the default action
 that is associated with the event.

 Event listeners that handle multiple kinds of events may want to check
 `cancelable` before invoking their `preventDefault()` methods.

Value
-----

 A boolean value, which is `true` if the event can be
 canceled.

Example
-------

 For example, browser vendors are proposing that the `wheel` event can only be canceled the first time the listener is called — any following `wheel` events cannot be
 canceled.


```js
function preventScrollWheel(event) {
  if (typeof event.cancelable !== "boolean" || event.cancelable) {
    // The event can be canceled, so we do so.
    event.preventDefault();
  } else {
    // The event cannot be canceled, so it is not safe
    // to call preventDefault() on it.
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener("wheel", preventScrollWheel);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelable② |

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

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

The **`defaultPrevented`** read-only property of the `Event` interface returns a boolean value indicating whether or not the call to `Event.preventDefault()` canceled the event.

Value
-----

A boolean value, where `true` indicates that the default user agent action was prevented, and `false` indicates that it was not.

Example
-------

This example logs attempts to visit links from two `<a>` elements. JavaScript is used to prevent the second link from working.

### HTML


```html
<p><a id="link1" href="#link1">Visit link 1</a></p>
<p><a id="link2" href="#link2">Try to visit link 2</a> (you can't)</p>
<p id="log"></p>
```

### JavaScript


```js
function stopLink(event) {
  event.preventDefault();
}

function logClick(event) {
  const log = document.getElementById("log");

  if (event.target.tagName === "A") {
    log.innerText = event.defaultPrevented
      ? `Sorry, but you cannot visit this link!\n${log.innerText}`
      : `Visiting link…\n${log.innerText}`;
  }
}

const a = document.getElementById("link2");
a.addEventListener("click", stopLink);
document.addEventListener("click", logClick);
```

### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-defaultprevented① |

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

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

**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 `Event` property
 **`returnValue`** indicates whether the default action for
 this event has been prevented or not.

 It is set to `true` by
 default, allowing the default action to occur. Setting this property to
 `false` prevents the default action.


**Note:** While `returnValue` has been adopted into the DOM
 standard, it is present primarily to support existing code. Use
 `preventDefault()`, and
 `defaultPrevented` instead of this historical
 property.


Value
-----

 A boolean value which is `true` if the event has not been
 canceled; otherwise, if the event has been canceled or the default has been prevented,
 the value is `false`.

 The value of `returnValue` is the opposite of the value returned by
 `defaultPrevented`.

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

| Specification |
| --- |
| DOM Standard # dom-event-returnvalue |

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

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

See also
--------

* `HTMLDialogElement.returnValue`: the return value for the `<dialog>`.
WindowSharedStorage: run() method
=================================

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

 The **`run()`** method of the
 `WindowSharedStorage` interface executes a run operation that is registered in a module added to the current origin's `SharedStorageWorklet`.

**Note:** The Run output gate is intended as a generic way to process some shared storage data.

Syntax
------


```js
run(name)
run(name, options)
```

### Parameters

`name`

A string representing the registered operation's name within the shared storage worklet module. It must match the name given to the operation when it is registered with `SharedStorageWorkletGlobalScope.register()`.

`options` Optional

An options object that can contain the following properties:

`data` Optional

An object representing any data required for executing the operation.

`keepAlive` Optional

A boolean value. If set to `true`, the `SharedStorageWorkletGlobalScope` of the associated worklet is kept alive, and the operation can be run again. Therefore, you need to set `keepAlive` to `true` for each operation that is not intended to be the last one. The default value, `false`, means that the `SharedStorageWorkletGlobalScope` is terminated after the operation is run and cannot be run again.


### Return value

A `Promise` that fulfills with `undefined`.

### Exceptions

`TypeError`

Thrown if:

* The worklet module has not yet been added with `addModule()`.
* Shared storage is disabled (for example via a browser setting).
* The calling site does not have the Shared Storage API included in a successful privacy sandbox enrollment process.

Examples
--------


```js
async function measureUniqueReach() {
  // Load the Shared Storage worklet
  await window.sharedStorage.worklet.addModule("reach-measurement-worklet.js");

  // Run the reach measurement operation
  await window.sharedStorage.run("reach-measurement", {
    data: { contentId: "1234" },
  });
}

measureUniqueReach();
```


See Unique reach measurement for a full explanation of this example. See Shared Storage API for more examples.

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

| Specification |
| --- |
| Shared Storage API # dom-windowsharedstorage-run |

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

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

See also
--------

* Shared Storage API
WindowSharedStorage: worklet property
=====================================

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

 The **`worklet`** read-only property of the
 `WindowSharedStorage` interface contains the `SharedStorageWorklet` instance representing the shared storage worklet for the current origin.

`SharedStorageWorklet` contains the `addModule()` method, which is used to add a module to the shared storage worklet.

Value
-----

A `SharedStorageWorklet` object.

Examples
--------


```js
// Randomly assigns a user to a group 0 or 1
function getExperimentGroup() {
  return Math.round(Math.random());
}

async function injectContent() {
  // Add the module to the shared storage worklet
  await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");

  // Assign user to a random group (0 or 1) and store it in shared storage
  window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation
  const fencedFrameConfig = await window.sharedStorage.selectURL(
    "ab-testing",
    [
      { url: `https://your-server.example/content/default-content.html` },
      { url: `https://your-server.example/content/experiment-content-a.html` },
    ],
    {
      resolveToConfig: true,
    },
  );

  // Render the chosen URL into a fenced frame
  document.getElementById("content-slot").config = fencedFrameConfig;
}

injectContent();
```


See the Shared Storage API landing page for a walkthrough of this example and for links to other examples.

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

| Specification |
| --- |
| Shared Storage API # dom-windowsharedstorage-worklet |

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

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

See also
--------

* Shared Storage API