recursal/MDN huggingface dataset:
Event: composedPath() メソッド
==========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`composedPath()`** は `Event` インターフェイスのメソッドで、イベントの経路をリスナーが呼び出されるオブジェクトの配列で返します。シャドウルートが `ShadowRoot.mode` が closed の状態で作成された場合、シャドウツリーのノードは含まれません。

構文
--


```js
const composed = Event.composedPath()
```

### 引数

なし。

### 返値

`EventTarget` オブジェクトの配列で、イベントリスナーが呼び出される予定の一連のオブジェクトを表します。

例
-

次の例は、 https://mdn.github.io/web-components-examples/composed-composed-path/ を試すもので、`<open-shadow>` と `<closed-shadow>` という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を `<p>` 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ `open` と `closed` に設定された状態で取り付けられることです。


```js
customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(pElem);
    }
  },
);

customElements.define(
  "closed-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({ mode: "closed" });
      shadowRoot.appendChild(pElem);
    }
  },
);
```


それからそれぞれの要素を 1 つずつをページに挿入します。


```html
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
```


それから click イベントリスナーを `<html>` 要素に設定します。


```js
document.querySelector("html").addEventListener("click", (e) => {
  console.log(e.composed);
  console.log(e.composedPath());
});
```


まず `<open-shadow>` 要素をクリックし、次に `<closed-shadow>` 要素をクリックすると、 2 つのことに気がつきます。第 1 に、`click` イベントは常にシャドウの境界を越えて伝搬することができるため、`composed` プロパティは `true` を返します。第 2 に、 2 つの要素の `composedPath` の値に違いがあります。

`<open-shadow>` 要素の合成パスは次の通りです。
```

Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


それに対して `<closed-shadow>` 要素の合成パスは次の通りです。
```

Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


2 番目の場合、イベントリスナーは `<closed-shadow>` 要素自身までしか伝搬せず、シャドウ境界の内側のノードには伝搬しません。

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event: target プロパティ
===================

**`target`** は `Event` インターフェイスの読み取り専用プロパティで、イベントが配信されたオブジェクトへの参照です。これは、イベントのバブリングまたはキャプチャ段階でイベントハンドラーが呼び出されたときの `Event.currentTarget` とは異なります。

値
-

関連する `EventTarget` です。

例
-

`event.target` プロパティは、**イベントデリゲーション**を実装するために使用できます。


```js
// リストの作成
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 はクリックされた <li> 要素を参照しています。
  // これはこのコンテキストで親である <ul> を参照している evt.currentTarget とは異なります。
  evt.target.style.visibility = "hidden";
}

// リストにリスナーを接続します
// <li> がクリックされた時に発行されます。
ul.addEventListener("click", hide, false);
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* イベントターゲットの比較
Event: initEvent() メソッド
=======================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`Event.initEvent()`** メソッドは、 `Document.createEvent()` を使用して作成されたイベント (`event`) の値を初期化するために使用します。

 この方法で初期化されたイベントは、 `Document.createEvent()` メソッドで作成されている必要があります。
 このメソッドは `EventTarget.dispatchEvent()` を使用してイベントが配信される前に、イベントを設定するために呼び出す必要があります。
 配信されると、もう何もしません。


**メモ:** **このメソッドは廃止されているため、使用しないでください。**
 代わりに、 `Event()` のような特定のイベントのコンストラクターを使用してください。イベントの作成と起動のページに、これらの使用方法の詳細が記載されています。


構文
--


```js
event.initEvent(type, bubbles, cancelable)
```

### 引数

`type`

文字列で、イベントの種類を定義します。

`bubbles`

論理値で、イベントがイベントチェーンを通じてバブルアップするかどうかを決定します。設定されると、読み取り専用のプロパティ `Event.bubbles` がその値を提供します。

`cancelable`

論理値で、イベントをキャンセルできるかどうかを定義します。設定されると、読み取り専用のプロパティ `Event.cancelable` がその値を提供します。

### 返値

なし。

例
-


```js
// イベントを作成
const event = document.createEvent("Event");

// バブルアップしキャンセルできないクリックイベントを
// 作成
event.initEvent("click", true, false);

// イベントを待ち受けする
elem.addEventListener(
  "click",
  (e) => {
    // e.target が elem と一致
  },
  false,
);

elem.dispatchEvent(event);
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* この非推奨のメソッドの代わりに使用するコンストラクター:
 `Event()`。より具体的なイベントインターフェイスを作成するには、目的のイベントインターフェイスに対して定義されたコンストラクターを使用します。
Event: Event() コンストラクター
=======================

**`Event()`** コンストラクターは、新しい `Event` を生成します。この方法で作成されたイベントは*合成イベント*と呼ばれ、ブラウザーによって発行されたイベントとは対照的となっており、スクリプトから配信することができます。

構文
--


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

### 値

`type`

文字列で、イベントの名前を表します。

`options` 省略可

以下のプロパティを持ったオブジェクトです。

`bubbles`

論理値で、イベントがバブリングするかどうかを示します。既定値は `false` です。

`cancelable`

論理値で、イベントがキャンセル可能かどうかを示します。既定値は `false` です。

`composed`

論理値で、イベントがシャドウルートの外のリスナーに伝わるかどうかを示します（詳しくは `Event.composed` を参照してください）。既定値は `false` です。


### 返値

新しい `Event` オブジェクトです。

例
-


```js
// バブルアップし、キャンセルできない look イベントを作成

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

// イベントは文書だけでなく、あらゆる要素から配信することができる
myDiv.dispatchEvent(evt);
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Event`
* `EventTarget.dispatchEvent()`
* イベントの作成とトリガー
Event: currentTarget プロパティ
==========================

**`currentTarget`** は `Event` インターフェイスの読み取り専用プロパティで、イベントが DOM を走査する際の、イベントの現在のターゲットを特定します。これは常にイベントハンドラーが装着されている要素を指し、`Event.target` とは対照的に、イベントが発生した要素やその子孫である可能性のある要素を特定します。

値
-

`EventTarget` で、現在のイベントハンドラーが装着されているオブジェクトを表します。

例
-

`Event.currentTarget` は、複数の要素に同じイベントハンドラーを割り当てるときに使用すると面白いです。


```js
function hide(e) {
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // この関数がイベントハンドラーとして使用されるとき： this === e.currentTarget
}

const ps = document.getElementsByTagName("p");

for (const p of ps) {
  // クリックされた <p> 要素を隠す
  p.addEventListener("click", hide, false);
}

document.body.addEventListener("click", hide, false);

// 周辺をクリックすると段落が消えます。
```


**メモ:** イベント処理中*だけ* `event.currentTarget` の値は利用可能です。
 もし `console.log()` で `event` オブジェクトを変数に格納し、コンソールで `currentTarget` キーを探すと、その値は `null` となります
 `console.log(event.currentTarget)` を使ってコンソールで表示するか、 `debugger` 文を使ってコードの実行を一時停止し、 `event.currentTarget` の値を表示させる必要があります。


仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* イベントターゲットの比較
Event: bubbles プロパティ
====================

**`bubbles`** は `Event` インターフェイスの読み取り専用プロパティで、イベントが DOM ツリーをバブリングするかしないかを示します。

**メモ:** バブリングについての詳細は、イベントのバブリングとキャプチャを参照してください。

値
-

論理値で、このイベントが DOM ツリーをバブリングするのであれば `true` です。

例
-


```js
function handleInput(e) {
  // バブリングするイベントを渡すかどうかをチェック
  if (!e.bubbles) {
    passItOn(e);
  }

  // 既にバブリングした
  doOutput(e);
}
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `stopPropagation()` はイベントのバブリングを停止します
* `stopImmediatePropagation()` は同じイベントが DOM 内の同じ水準で他のリスナーを呼び出すことを抑止します
* `preventDefault()` は拡散を続けることを許可しますが、ブラウザーがイベントを扱うためのリスナーがない既定のアクションを実行することを許可しません
Event: isTrusted プロパティ
======================

**`isTrusted`** は `Event` インターフェイスの読み取り専用プロパティで、このイベントがユーザー操作によって生成された場合は `true`、このイベントがスクリプトで作成または変更されたり、 `EventTarget.dispatchEvent()` で配信されたりした場合は `false` となる論理値を返します。

値
-

論理値です。

例
-


```js
if (e.isTrusted) {
  /\* このイベントは信頼されている \*/
} else {
  /\* このイベントは信頼されていない \*/
}
```

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event: returnValue プロパティ
========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

`Event` の **`returnValue`** は、このイベントの既定のアクションが禁止されているかどうかを示します。

既定では `true` で、既定のアクションを実行してもよいことを表します。このプロパティを `false` に設定すると、既定のアクションを阻止します。

**メモ:** `returnValue` は DOM 標準に採用されましたが、主に既存のコードをサポートするために存在しています。この古いなプロパティの代わりに `preventDefault()` と `defaultPrevented` を使用してください。

値
-

論理値で、イベントがキャンセルされていない場合は `true` となります。そうでない場合、イベントがキャンセルされたか、既定のアクションが阻止された場合に `false` となります。

`returnValue` の値は `defaultPrevented` が返す値とは逆の値になります。

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `HTMLDialogElement.returnValue`: `<dialog>` の返値
Event: timeStamp プロパティ
======================

**`timeStamp`** は `Event` インターフェイスの読み取り専用プロパティで、イベントが作成された時刻（ミリ秒単位）を返します。

値
-

 この値は、時間の起点からイベントが作成されるまでの経過ミリ秒数です。
 グローバルオブジェクトが `Window` である場合、ユーザーがリンクをクリックした瞬間、または文書の読み込みを開始したスクリプトが時間の起点となります。
 ワーカーでは、時間の起点はワーカーが作成された瞬間となります。

値は、5 マイクロ秒（0.005 ミリ秒）精度の `DOMHighResTimeStamp` ですが、[フィンガープリンティング(/ja/docs/Glossary/Fingerprinting)を防ぐために精度が落とされています。

例
-

### HTML


```html
<p>
  この iframe にフォーカスを設定していずれかのキーを押下すると、 keypress
  イベントの現在のタイムスタンプを取得します。
</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);
```

### 結果

時間精度の低下
-------

タイミング攻撃やフィンガープリントに対する保護を提供するために、`Event.timeStamp` の精度はブラウザーの設定によって丸められていることがあります。

Firefox では、`privacy.reduceTimerPrecision` 環境設定が既定で有効になっており、既定値は 2 ミリ秒になっています。


```js
// Firefox での時間精度の低下（既定: 2 ミリ秒）
event.timeStamp;
// 9934
// 10362
// 11670
// …
```


Firefox では、 `privacy.resistFingerprinting` も有効にすると、精度は 100 ミリ秒または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のうち大きい方になります。

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event: stopPropagation() メソッド
=============================

**`stopPropagation()`** は `Event` インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。しかし、これは既定の動作の発生を妨げるものではありません。例えば、リンクのクリックはまだ処理されます。これらの動作を止めたい場合は、`preventDefault()` メソッドを参照してください。また、現在の要素における他のイベントハンドラーへの伝搬も防げません。それらを止めたい場合は、`stopImmediatePropagation()`　を参照してください。

構文
--


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

### 引数

なし。

### 返値

なし。

例
-

イベントの伝播 を参照してください。
 `stopImmediatePropagation()` の例も参照してください。

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event: originalTarget プロパティ
===========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`originalTarget`** は `Event` インターフェイスの読み取り専用プロパティで、このイベントが再ターゲットされる前の下のターゲットを返します。 `Event.explicitOriginalTarget` とは異なり、ネイティブの無名コンテンツになることもあります。

イベントターゲットの比較も参照してください。

仕様書
---

*これは Mozilla 固有のプロパティであり、現在のどの仕様にも含まれていません。標準化される予定もありません。*

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event: defaultPrevented プロパティ
=============================

**`defaultPrevented`** は `Event` インターフェイスの読み取り専用プロパティで、`Event.preventDefault()` の呼び出しがイベントをキャンセルしたかどうかを示す値を論理値で返します。

値
-

論理値で、 `true` は既定のユーザーエージェントの動作が抑制されたことを、 `false` はそうではないことを表しています。

例
-

この例は 2 つの `<a>` 要素のリンクを訪れる試みをログ出力します。 JavaScript は 2 番目のリンクの動作を抑制するために使用しています。

### 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);
```

### 結果

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event: composed プロパティ
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`composed`** は `Event` インターフェイスの読み取り専用プロパティで、イベントがシャドウ DOM 境界を越えて標準 DOM に伝播するかどうかを示す論理値を返すものです。

UA から送られるすべての UI イベントは合成されます（クリック/タッチ/マウスオーバー/コピー/ペーストなど）。他のほとんどの種類のイベントは合成されないので、`false` を返します。これには、例えば `composed` オプションを `true` に設定せずに作成された合成イベントも含まれます。

伝播は `bubbles` プロパティが `true` である場合にのみ発生します。ただし、合成されたイベントのみをキャプチャした場合は、ホスト側でも `AT_TARGET` フェーズであるかのように処理されます。イベントがシャドウルートを通って DOM ルートに到達するパスを決定するには、 `composedPath()` を呼び出すことで行えます。

値
-

論理値で、イベントがシャドウルート（つまり、シャドウ DOM の中で、イベントが伝播し始めた最初のノード）に到達した後、シャドウ DOM から標準 DOM に伝播する場合は `true` となります。

この値が `false` の場合、シャドウルートはイベントが提供される最後のノードとなります。

例
-

この例では、`<open-shadow>` と `<closed-shadow>` という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を `<p>` 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ `open` と `closed` に設定された状態で取り付けられることです。

2 つの定義は次のようになります。


```js
customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({
        mode: "open",
      });

      shadowRoot.appendChild(pElem);
    }
  },
);

customElements.define(
  "closed-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({
        mode: "closed",
      });

      shadowRoot.appendChild(pElem);
    }
  },
);
```


それからそれぞれの要素を 1 つずつをページに挿入します。


```html
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
```


それから click イベントリスナーを `<html>` 要素に設定します。


```js
document.querySelector("html").addEventListener("click", (e) => {
  console.log(e.composed);
  console.log(e.composedPath());
});
```


まず `<open-shadow>` 要素をクリックし、次に `<closed-shadow>` 要素をクリックすると、 2 つのことに気がつきます。

1. `click` イベントは常にシャドウの境界を越えて伝播することができるため、 `composed` プロパティは `true` を返します。
2. 2 つの要素の `composedPath` の値に違いがあります。

`<open-shadow>` 要素の合成パスは次の通りです。
```

Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


それに対して `<closed-shadow>` 要素の合成パスは次の通りです。
```

Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


2 番目の場合、イベントリスナーは `<closed-shadow>` 要素自身までしか伝播せず、シャドウ境界の内側のノードには伝播しません。

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event: srcElement プロパティ
=======================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非推奨の **`Event.srcElement`** は `Event.target` プロパティの別名です。代わりに `Event.target` を使用してください。

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Window.event`
Event: cancelable プロパティ
=======================

**`cancelable`** は `Event` インターフェイスの読み取り専用プロパティで、イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。

イベントがキャンセルでき*ない*場合、 `cancelable` プロパティは `false` となり、イベントが発生することをイベントリスナーが抑止することができないことを示します。

ブラウザーネイティブのイベントのうち、キャンセル可能なもののほとんどは、ユーザーのページとの対話の結果から発生したものです。 `click`, `wheel`, `beforeunload` の各イベントをキャンセルすると、それぞれユーザーが何かをクリックすること、ページをスクロールすること、他のページに移動することをそれぞれ抑止することができます。

その他の JavaScript によって作成されたカスタムイベントは、作成時にキャンセル可能であるかどうかを制御します。

イベントをキャンセルするには、そのイベントに対して `preventDefault()` メソッドを呼び出してください。これにより、実装はイベントに関連付けられた既定のアクションを実行しないようになります。

複数の種類のイベントを処理するイベントリスナーは、 `preventDefault()` メソッドを呼び出す前に `cancelable` をチェックしたほうがいいかもしれません。

値
-

論理値で、イベントがキャンセル可能であれば `true` です。

例
-

例えば、ブラウザーベンダーは `wheel` イベントが、最初にリスナーが呼び出されたときのみキャンセル可能にしようと提案しています。 — その後の `wheel` イベントはキャンセルできません。


```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);
```

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceObserver: PerformanceObserver() コンストラクター
===================================================

**`PerformanceObserver()`** コンストラクターは、新しい `PerformanceObserver` オブジェクトを、指定されたオブザーバー `callback` を使用して作成します。オブザーバーコールバックは、パフォーマンス項目イベントが登録された項目型に対して記録されたときに、`observe()` メソッドを介して呼び出されます。

構文
--


```js
new PerformanceObserver(callback)
```

### 引数

`callback`

監視対象のパフォーマンスイベントが記録されたときに呼び出される `PerformanceObserverCallback` コールバック。コールバックが呼び出されるとき、以下の引数が利用できます。

`entries`

パフォーマンスオブザーバー項目のリストです。

`observer`

上記の項目を受け取っている `observer` オブジェクトです。

`droppedEntriesCount` 省略可

バッファーが一杯になったためにバッファーから失われた項目の数です。`buffered` フラグを参照してください。


### 返値

監視対象のパフォーマンスイベントが発生したときに指定されたコールバック (`callback`) を呼び出す新しい `PerformanceObserver` オブジェクト。

例
-

### PerformanceObserver の作成

 次の例では、 "mark" (`PerformanceMark`) および "measure" (`PerformanceMeasure`) イベントを監視する `PerformanceObserver` を作成します。
 `perfObserver` コールバックは `list` (`PerformanceObserverEntryList`) を提供し、監視しているパフォーマンス項目を取得することができます。


```js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

### 失われたバッファー項目

`PerformanceObserver` に `buffered` フラグを使用して、過去のパフォーマンス項目を使用することができます。
 ただし、バッファーサイズには制限があります。パフォーマンスオブザーバーのコールバックにはオプションで `droppedEntriesCount` 引数が格納され、バッファーストレージが一杯になったために失われた項目の数を通知します。


```js
function perfObserver(list, observer, droppedEntriesCount) {
  list.getEntries().forEach((entry) => {
    // do something with the entries
  });
  if (droppedEntriesCount > 0) {
    console.warn(
      `${droppedEntriesCount} entries got dropped due to the buffer being full.`,
    );
  }
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ type: "resource", buffered: true });
```


通常、リソースタイミング項目はたくさんあり、これらの項目については、 `performance.setResourceTimingBufferSize()` を使用してより大きなバッファを設定し、 `resourcetimingbufferfull` イベントを監視することもできます。

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver-constructor |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceObserver: observe() メソッド
===================================

**`observe()`** は **`PerformanceObserver`** インターフェイスのメソッドで、観測するパフォーマンス項目型のセットを指定します。

項目型の一覧には `PerformanceEntry.entryType` を、ユーザーエージェントが対応している項目型の一覧には `PerformanceObserver.supportedEntryTypes` を使用してください。

一致するパフォーマンス項目が記録されると、パフォーマンスオブザーバーのコールバック関数 (`PerformanceObserver`) の作成時に設定されたコールバック関数が呼び出されます。

構文
--


```js
observe(options)
```

### 引数

`options`

以下の使用可能メンバーを持つオブジェクトです。

`buffered`

論理値のフラグで、バッファリングされた項目をオブザーバーのバッファにキューイングするかどうかを示します。 "`type`" オプションと一緒の場合のみ使用してください。

`durationThreshold`

`PerformanceEventTiming` (en-US) 項目の閾値を定義する `DOMHighResTimeStamp` です。既定値では 104ms で、8ms 単位で丸められます。使用可能な閾値の最小値は 16ms です。 `entryTypes` オプションと一緒に使用することはできません。

`entryTypes`

文字列オブジェクトの配列で、それぞれ観測するパフォーマンス項目の型を指定します。 "`type`", "`buffered`", "`durationThreshold`" オプションと一緒に使用することはできません。

有効なパフォーマンス項目名の一覧は `PerformanceEntry.entryType` を参照ください。認識できない型は無視されますが、開発者がコードをデバッグするのを支援するために、ブラウザーがコンソールに警告メッセージを出力することがあります。有効な型が見つからなかった場合、 `observe()` は何の効果もありません。

`type`

観測するパフォーマンス項目の型を指定する単一の文字列。 `entryTypes` オプションと一緒に使用してはいけません。


### 返値

なし (`undefined`)。

例
-

この例では、2 つの `PerformanceObservers` を作成して設定します。1 つは`"mark"` と `"frame"` イベントを観測し、もう 1 つは `"measure"` イベントを観測します。


```js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "mark" and "measure" events
  });
});
observer.observe({ entryTypes: ["mark", "measure"] });
```

### 単一のパフォーマンス項目型を観測

次の例は、`buffered` と `type` の構成オプションを使用して、リソースタイミングイベント (`PerformanceResourceTiming`) のバッファーイベントを取得し、新しいイベントを購読します。オブザーバーが `buffered` または `durationThreshold` オプションを使用するように構成する必要がある場合は、 `entryType` の代わりに `type` を使用します。そうしないと、複数の型のパフォーマンス項目をうまく収集できません。


```js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "resource" events
  });
});
observer.observe({ type: "resource", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver-observe |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceObserver: supportedEntryTypes 静的プロパティ
================================================

**`supportedEntryTypes`** は `PerformanceObserver` インターフェイスの静的読み取り専用プロパティで、このユーザーエージェントが対応している `entryType` 値の配列を返します。

対応している項目のリストはブラウザーごとに異なり、進化しているため、このプロパティによってウェブ開発者は利用できる項目を調べることができます。

値
-

`PerformanceEntry.entryType` 値の配列です。

例
-

### コンソールを使用して対応している値をチェック

ブラウザーの対応している `entryType` 値を探すには、 `PerformanceObserver.supportedEntryTypes` とコンソールに入力します。これは対応している値の配列を返します。


```js
PerformanceObserver.supportedEntryTypes;

// Chrome 99 では ["element", "event", "first-input", "largest-contentful-paint", "layout-shift", "longtask", "mark", "measure", "navigation", "paint", "resource"] を返す
```

### 未対応の型のチェック

以下の関数は、使用可能な項目型の配列に対応しているか調べます。サポートされていない型はコンソールにログ出力されますが、この情報をクライアント側の分析にログ出力して、具体的な型が監視できなかったことを示すこともできます。


```js
function detectSupport(entryTypes) {
  for (const entryType of entryTypes) {
    if (!PerformanceObserver.supportedEntryTypes.includes(entryType)) {
      console.log(entryType);
    }
  }
}

detectSupport(["resource", "mark", "first-input", "largest-contentful-paint"]);
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # supportedentrytypes-attribute |

ブラウザーの互換性
---------

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