recursal/MDN huggingface dataset:
Element: wheel イベント
===================

**`wheel`** イベントは、ユーザーがポインティングデバイス（通常はマウス）のホイールボタンを回転させたときに発行されます。

このイベントは標準外、非推奨の `mousewheel` イベントを置き換えるものです。

**メモ:** `wheel` イベントと `scroll` イベントを混同しないでください。 `wheel` イベントの既定のアクションは実装固有のものであり、必ずしも `scroll` イベントを発行するわけではありません。その場合でも、ホイールイベントの `delta*` 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 `wheel` イベントの `delta*` プロパティに頼らないようにしてください。代わりに、 `scroll` イベント内のターゲットの `scrollLeft` や `scrollTop` の値の変化を検出するようにしてください。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

`WheelEvent` です。`Event` を継承しています。

Event

UIEvent

MouseEvent

WheelEventイベントプロパティ
---------

*このインターフェイスには、祖先である `MouseEvent`, `UIEvent`, `Event` から継承したプロパティがあります。*

`WheelEvent.deltaX` 読取専用 

水平スクロール量を表す `double` を返します。

`WheelEvent.deltaY` 読取専用 

垂直方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaZ` 読取専用 

z 軸のスクロール量を表す `double` を返します。

`WheelEvent.deltaMode` 読取専用 

`delta*` 値のスクロール量の単位を表す `unsigned long` を返します。指定可能な値は次の通りです。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` の値はピクセル単位で指定します。 |
| `WheelEvent.DOM_DELTA_LINE` | `0x01` | `delta*` 値は行単位で指定します。行の高さを計算するために使用する方法はブラウザーに依存します。 |
| `WheelEvent.DOM_DELTA_PAGE` | `0x02` | `delta*` 値はページ単位で指定します。各マウスクリックはコンテンツのページをスクロールします。 |

`WheelEvent.wheelDelta` 読取専用  
非推奨

ピクセル単位で距離を表す整数（32 ビット）を返します。

`WheelEvent.wheelDeltaX` 読取専用  
非推奨

水平スクロール量を表す整数を返します。

`WheelEvent.wheelDeltaY` 読取専用  
非推奨

垂直スクロール量を表す整数を返します。

例
-

### ホイールで要素を拡大縮小

この例は、マウス（またはその他のポインティングデバイスの）ホイールを使用して要素を拡大縮小する方法を示します。


```html
<div>Scale me with your mouse wheel.</div>
```



```css
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}
```



```js
function zoom(event) {
  event.preventDefault();

  scale += event.deltaY \* -0.01;

  // Restrict scale
  scale = Math.min(Math.max(0.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
```

### addEventListener による同等のもの

イベントハンドラーは `addEventListener()` メソッドを使用して設定することもできます。


```js
el.addEventListener("wheel", zoom, { passive: false });
```

仕様書
---

| Specification |
| --- |
| UI Events # event-type-wheel |
| HTML Standard # handler-onwheel |

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

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

関連情報
----

* `WheelEvent`
* Document: `wheel` イベント
Element: ariaMultiSelectable プロパティ
==================================

**`ariaMultiSelectable`** は `Element` インターフェイスのプロパティで、`aria-multiselectable` (en-US) 属性の値を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。

**メモ:** 可能であれば、HTML の `<select>` 要素を使用してください。これは意味づけが組み込まれており、ARIA 属性を必要としないからです。

値
-

以下のいずれかの値を持つ文字列です。

`"true"`

一度に複数の項目を選択することができます。

`"false"`

選択できる項目は 1 つです。

例
-

この例では、ID が `listbox1` の要素の `aria-multiselectable` 属性が "true" に設定されており、この入力が複数の選択項目を受け入れることを示しています。`ariaMultiSelectable` を使用して、値を "false" に更新します。


```html
<div role="listbox" tabindex="0" id="listbox1"
 aria-multiselectable="true" aria-labelledby="listbox1label" aria-activedescendant="listbox1-1">
  <div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div>
  <div role="option" id="listbox1-2">Orange</div>
  <div role="option" id="listbox1-3">Red</div<
</div>
```



```js
let el = document.getElementById("listbox1");
console.log(el.ariaMultiSelectable); // "true"
el.ariaMultiSelectable = "false";
console.log(el.ariaMultiSelectable); // "false"
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariamultiselectable |

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

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

関連情報
----

* ARIA: listbox ロール
Element: keypress イベント
======================

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

**`keypress`** イベントは、文字値を生成するキーが押下されたときに発行されます。

文字値を生成するキーの例としては、アルファベットキー、数字キー、区切り記号キーが挙げられます。文字値を生成しないキーの例としては、 `Alt`, `Shift`, `Ctrl`, `Meta` のような修飾キーが挙げられます。

**警告:** このイベントは非推奨になりましたので、代わりに `beforeinput` または `keydown` を使用してください。

構文
--

イベント名を `addEventListener()` などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。


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

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

イベント型
-----

`KeyboardEvent` です。 `Event` から継承しています。

Event

UIEvent

KeyboardEventイベントプロパティ
---------

*このインターフェイスには親である `UIEvent` や `Event` から継承したプロパティもあります。*

`KeyboardEvent.altKey` 読取専用 

論理値で、このキーイベントが発生した際に `Alt` （macOS の場合は `Option` または `⌥`）キーが押されていれば `true` を返します。

`KeyboardEvent.code` 読取専用 

文字列で、このイベントが表す物理キーのコード値を返します。

**警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 `Keyboard.getLayoutMap()` を使用してください。

`KeyboardEvent.ctrlKey` 読取専用 

論理値で、そのキーイベントが発生した際に `Ctrl` キーが押されていれば `true` を返します。

`KeyboardEvent.isComposing` 読取専用 

論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。

`KeyboardEvent.key` 読取専用 

文字列で、このイベントが表すキーのキー値を表します。

`KeyboardEvent.locale` 読取専用 

文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。

**メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。

`KeyboardEvent.location` 読取専用 

数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、キーボード上の位置にあります。

`KeyboardEvent.metaKey` 読取専用 

論理値で、このキーイベントが発生した際に `Meta` キー（Mac キーボードでは `⌘ Command` キー、 Windows キーボードでは Windows キー (`⊞`)）が押されていれば `true` を返します。

`KeyboardEvent.repeat` 読取専用 

論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。

`KeyboardEvent.shiftKey` 読取専用 

論理値で、このキーイベントが発生した際に `Shift` キーが押されていれば `true` を返します。

例
-

### addEventListener による keypress の例

この例では、 `<input>` 要素内でキーを押したときに、 `KeyboardEvent.code` 値を記録します。


```html
<div>
  <label for="sample"
 >この入力欄にフォーカスを当てて、何か入力してください。</label
 >
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>
```



```js
const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### onkeypress による同等の例


```js
input.onkeypress = logKey;
```

仕様書
---

| Specification |
| --- |
| UI Events # event-type-keypress |
| HTML Standard # handler-onkeypress |

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

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

関連情報
----

* 同様にこのイベントのターゲットとなる `Document` インターフェイス。
* 関連イベント:
    + `input`
    + `keydown`
    + `keyup`
Element: ariaRowIndex プロパティ
===========================

**`ariaRowIndex`** は `Element` インターフェイスのプロパティで、表やグリッドやツリーグリッド内の行の総数に対する要素の行インデックスや位置を定義する `aria-rowindex` (en-US) 属性の値を反映します。

値
-

整数の入った文字列です。

例
-

この例では、ID が `role-heading` の要素の `aria-rowindex` 属性は "1" に設定されています。`ariaRowIndex` を使用して、値を "2" に更新します。


```html
<table
 id="semantic-table"
 role="table"
 aria-label="Semantic Elements"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="100">
  <caption id="semantic\_elements\_table\_desc">
    Semantic Elements to use instead of ARIA's roles
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th
 role="columnheader"
 id="role-heading"
 aria-sort="none"
 aria-rowindex="1">
        ARIA Role
      </th>
      <th
 role="columnheader"
 id="element-heading"
 aria-sort="none"
 aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>
```



```js
let el = document.getElementById("role-heading");
console.log(el.ariaRowIndex); // 1
el.ariaRowIndex = "2";
console.log(el.ariaRowIndex); // 2
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarowindex |

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

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

関連情報
----

* ARIA: table ロール
Element: requestPointerLock() メソッド
==================================

**`Element.requestPointerLock()`** メソッドで、ポインターをこの要素にロックすることを非同期にリクエストすることができます。

リクエストが成功したか失敗したかを追跡するには、 `pointerlockchange` および `pointerlockerror` イベントを `Document` レベルで待ち受けする必要があります。

構文
--


```js
requestPointerLock()
requestPointerLock(options)
```

### 引数

`options` 省略可

以下のプロパティを含むことができるオプションオブジェクトです。

`unadjustedMovement` 省略可

OS レベルのマウス加速機能を無効にし、代わりに生のマウス入力にアクセスします。既定値は `false` で、`true` に設定すると加速機能が無効になります。


### 返値

`Promise` で、`undefined` に解決します。

**メモ:** ブラウザーによっては、プロミスバージョンの `requestPointerLock()` に対応していないものもあります。

例
-

ポインターロックはオンラインゲームでよく使われます。マウスポインターが動き回ったり、ゲームエリアの外に出たり、ウィンドウの端に届いたりすることなく、マウスの動きをゲームの操作に集中させたい場合に使用します。

ポインターロックを有効にするには、ボタンを押すか、ゲームキャンバスそのものを押すなどして、ユーザーに何らかの方法で UI を操作してもらう必要があります。


```js
canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});
```


オペレーティングシステムは既定で マウス加速機能を有効にしています。これは、ゆっくり正確な動きをしたいとき（グラフィックパッケージを使用する場合を考えてみてください）に便利ですが、より速いマウス操作で大きな距離を移動したいとき（スクロールや複数のファイルを選択する場合を考えてみてください）にも便利です。しかし、一人称視点のゲームでは、カメラの回転を制御するために生のマウス入力データが好まれます。プロゲーマーによれば、この方がより良いゲーム操作で高い精度が得られるとのことです。

OS レベルのマウス加速機能を無効にし、生のマウス入力にアクセスするには、`unadjustedMovement` を `true` に設定します。


```js
canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock({
    unadjustedMovement: true,
  });
});
```


それ以外の例のコードは次をご覧ください。

* pointer lock demo（ソースコードを見る）
* Pointer Lock API
* Disable mouse acceleration to provide a better FPS gaming experience
セキュリティ
------

単発のユーザーによる有効化が必要です。この機能が動作するためには、ユーザーがページまたは UI 要素を操作する必要があります。

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # dom-element-requestpointerlock |

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

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

関連情報
----

* `Document.pointerLockElement`
* `Document.exitPointerLock()`
* ポインターロック
Element: focus イベント
===================

**`focus`** イベントは、要素がフォーカスを受け取ったときに発生します。このイベントはバブリングしませんが、その後に発生する関連する `focusin` イベントはバブリングします。

`focus` の反対は `blur` であり、これは要素がフォーカスを失ったときに発生します。

`focus` イベントはキャンセル不可です。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

`FocusEvent` です。 `Event` を継承しています。

Event

UIEvent

FocusEventイベントプロパティ
---------

*親である `UIEvent` および間接的に `Event` から継承したプロパティもあります*。

`FocusEvent.relatedTarget`

もしあれば、フォーカスを受け取った要素。

例
-

### 簡単な例

#### HTML


```html
<form id="form">
  <label>
    テキストを入力:
    <input type="text" placeholder="テキストを入力" />
  </label>
  <label>
    パスワード:
    <input type="password" placeholder="password" />
  </label>
</form>
```


#### JavaScript


```js
const password = document.querySelector('input[type="password"]');

password.addEventListener("focus", (event) => {
  event.target.style.background = "pink";
});

password.addEventListener("blur", (event) => {
  event.target.style.background = "";
});
```


#### 結果

### イベント委譲

このイベントのイベント委譲を実装する方法は 2 つあります。 `focusin` イベントを使用するか、 `addEventListener()` の `useCapture` 引数に `true` を設定するかです。

#### HTML


```html
<form id="form">
  <label>
    テキストを入力:
    <input type="text" placeholder="テキストを入力" />
  </label>
  <label>
    パスワード:
    <input type="password" placeholder="password" />
  </label>
</form>
```


#### JavaScript


```js
const form = document.getElementById("form");

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);
```


#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

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

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

関連情報
----

* `HTMLElement.focus()` メソッド
* 関連イベント: `blur`, `focusin`, `focusout`
* `Window` を対象としたこのイベント: `focus` イベント
* Focusing: focus/blur
Element: beforematch イベント
=========================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

要素が **`beforematch`** イベントを受け取るのは、それが *hidden until found* の状態にあり、ユーザーが「ページ内検索」機能やフラグメントナビゲーションによってコンテンツを見つけたため、ブラウザーがそのコンテンツを表示しようとしているときです。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

一般的な `Event` です。

使用上のメモ
------

HTML の `hidden` 属性は、`until-found` の値を受け入れます。この値が指定されると、要素は非表示になりますが、ブラウザーの「ページ内検索」機能やフラグメントナビゲーションではそのコンテンツにアクセスできるようになります。これらの機能により、"hidden until found" のサブツリーの要素にスクロールが発生した場合、ブラウザーは次のようになります。

* 非表示の要素で `beforematch` イベントが発生する
* その要素から `hidden` 属性が除去される
* その要素へスクロールする
例
-

### beforematch の使用

この例では、次のものがあります。

* 2 つの `<div>` 要素。最初の要素は非表示で、2 つ目には `hidden="until-found"` と `id="until-found-box"` 属性があります。
* `"until-found-box"` フラグメントをターゲットとしたリンク。

また、hidden until found 要素で発行される `beforematch` イベントを待ち受けする JavaScript もあります。イベントハンドラーはボックスのテキストコンテンツを変更します。

#### HTML


```html
<a href="#until-found-box">非表示のコンテンツへ移動</a>

<div>非表示ではない</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
```


```
<button id="reset">リセット</button>
```


#### CSS


```css
div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}
```


```
#until-found-box {
  scroll-margin-top: 200px;
}
```


#### JavaScript


```js
const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);
```


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


#### 結果

「非表示のコンテンツへ移動」ボタンをクリックすると、hidden-until-found 要素に移動します。`beforematch` イベントが発行され、テキストコンテンツが更新され、要素のコンテンツが表示されます。

例を再度実行する場合は、「リセット」を押してください。

ブラウザーが `hidden` 属性の列挙値 `"until-found"` に対応していない場合、2つ目の `<div>` は非表示になります（`until-found` 値が追加される前の `hidden` は論理属性でした）。

仕様書
---

| Specification |
| --- |
| HTML Standard # event-beforematch |

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

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

関連情報
----

* HTML の `hidden` 属性
Element: ariaValueText プロパティ
============================

**`ariaValueText`** は `Element` インターフェイスのプロパティで、範囲ウィジェットの aria-valuenow の代替となる人間が読み取り可能なテキストを定義する `aria-valuetext` (en-US) 属性の値を反映します。

値
-

文字列です。

例
-

この例では、ID が `slider` の要素の `aria-valuetext` 属性に "Sunday" を設定し、人間が読み取り可能な範囲の値を与えています。`ariaValueText` を使用して、値を "Monday" に更新します。


```html
<div
 id="slider"
 role="slider"
 aria-valuenow="1"
 aria-valuemin="1"
 aria-valuemax="7"
 aria-valuetext="Sunday"></div>
```



```js
let el = document.getElementById("slider");
console.log(el.ariaValueText); // Sunday
el.ariaValueText = "Monday";
console.log(el.ariaValueText); // Monday
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariavaluetext |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: gestureend イベント
========================

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

**`gestureend`** イベントは、タッチ面に複数の指が接触しなくなったとき、すなわちジェスチャーが終了したときに発生します。

これは WebKit 固有のイベントです。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

`GestureEvent` (en-US) です。`Event` から継承しています。

イベントプロパティ
---------

*このインターフェイスには、親である `UIEvent` および `Event` から継承したプロパティがあります。*

`GestureEvent.rotation` 読取専用 

イベント開始時からの回転の変化（度単位）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。

`GestureEvent.scale` 読取専用 

イベント開始時からの 2 桁間の距離。ジェスチャー開始時の桁間距離の浮動小数点倍数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 より大きい値は外向きのピンチ解除（ズームイン）を示します。初期値は `1.0` です。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* GestureEventClassReference at the Safari Developer Library
Element: dblclick イベント
======================

**`dblclick`** イベントは、ポインティングデバイスのボタン（マウスの第一ボタンなど）がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く 2 回クリックされたときに発行されます。

`dblclick` は 2 回の `click` イベントの後 (展開すると、2 組の `mousedown` および `mouseup` の後) に発生します。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

`MouseEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEventイベントプロパティ
---------

*親である `UIEvent` および `Event` から継承したプロパティもあります*。

`MouseEvent.altKey` 読取専用 

このマウスイベントが発行されたときに `alt` キーが押されていた場合は `true` を返します。

`MouseEvent.button` 読取専用 

このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。

`MouseEvent.buttons` 読取専用 

このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。

`MouseEvent.clientX` 読取専用 

ビューポート座標におけるマウスポインターの X 座標です。

`MouseEvent.clientY` 読取専用 

ビューポート座標におけるマウスポインターの Y 座標です。

`MouseEvent.ctrlKey` 読取専用 

このマウスイベントが発行されたときに `control` キーが押されていた場合は `true` を返します。

`MouseEvent.layerX` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の水平座標を返します。

`MouseEvent.layerY` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の垂直座標を返します。

`MouseEvent.metaKey` 読取専用 

このマウスイベントが発行されたときに `meta` キーが押されていた場合は `true` を返します。

`MouseEvent.movementX` 読取専用 

前回の `mousemove` イベントの位置から相対的なマウスポインターの X 座標です。

`MouseEvent.movementY` 読取専用 

前回の `mousemove` イベントの位置から相対的なマウスポインターの Y 座標です。

`MouseEvent.offsetX` 読取専用 

対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。

`MouseEvent.offsetY` 読取専用 

対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。

`MouseEvent.pageX` 読取専用 

文書全体からの相対的なマウスポインターの X 座標です。

`MouseEvent.pageY` 読取専用 

文書全体からの相対的なマウスポインターの Y 座標です。

`MouseEvent.relatedTarget` 読取専用 

もしあれば、イベントの副ターゲットです。

`MouseEvent.screenX` 読取専用 

スクリーン座標におけるマウスポインターの X 座標です。

`MouseEvent.screenY` 読取専用 

スクリーン座標におけるマウスポインターの Y 座標です。

`MouseEvent.shiftKey` 読取専用 

このマウスイベントが発行されたときに `shift` キーが押されていた場合は `true` を返します。

`MouseEvent.mozInputSource` 
Non-standard
 読取専用 

 イベントを発生させた機器の種類（`MOZ_SOURCE_*` 定数のいずれか）。
 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。


`MouseEvent.webkitForce` 
Non-standard
 読取専用 

クリックしたときに適用された圧力です。

`MouseEvent.x` 読取専用 

`MouseEvent.clientX` の別名です。

`MouseEvent.y` 読取専用 

`MouseEvent.clientY` の別名です。

例
-

この例では、カードをダブルクリックするたびに寸法が切り替わります。

### JavaScript


```js
const card = document.querySelector("aside");

card.addEventListener("dblclick", (e) => {
  card.classList.toggle("large");
});
```

### HTML


```html
<aside>
  <h3>カード</h3>
  <p>ダブルクリックするとこのオブジェクトをリサイズします。</p>
</aside>
```

### CSS


```css
aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform 0.6s;
  user-select: none;
}

.large {
  transform: scale(1.3);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-dblclick |
| HTML Standard # handler-ondblclick |

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

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

関連情報
----

* イベントの紹介
* `auxclick`
* `click`
* `contextmenu`
* `mousedown`
* `mouseup`
* `pointerdown`
* `pointerup`
Element: elementTiming プロパティ
============================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`elementTiming`** は `Element` インターフェイスのプロパティで、`PerformanceElementTiming` API で監視する要素を特定します。`elementTiming` プロパティは `elementtiming` 属性の値を反映します。

値
-

文字列です。

例
-

### `elementTiming` の値をログ出力

この例では、`elementtiming` 属性を `<img>` 要素に追加することで、監視する画像を設定します。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```


HTML の `elementtiming` 属性の文字列値は、`el.elementTiming` を呼び出すことで取得することができます。


```js
const el = document.getElementById("myImage");
console.log(el.elementTiming); // "big-image"
```


要素タイミング API を使用する方法について、より完全な例は `PerformanceElementTiming` を参照してください。

仕様書
---

| Specification |
| --- |
| Element Timing API # dom-element-elementtiming |

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

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

関連情報
----

* `PerformanceElementTiming`
* HTML の `elementtiming` 属性
Element: scrollTo() メソッド
========================

**`scrollTo()`** は `Element` インターフェイスのメソッドで、指定された要素内を指定された座標までスクロールします。

構文
--


```js
scrollTo(x-coord, y-coord)
scrollTo(options)
```

### 引数

* `x-coord` は、要素の水平軸上で左上に表示したいピクセルです。
* `y-coord` は、要素の垂直軸状で左上に表示したいピクセルです。

- または -

`options`

以下の引数を含む辞書オブジェクトです。

`top`

ウィンドウまたは要素をスクロールする Y 軸方向のピクセル数を指定します。

`left`

ウィンドウまたは要素をスクロールする X 軸方向のピクセル数を指定します。

`behavior`

スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取ります。

* `smooth`: スクロールをスムーズなアニメーションで行う
* `instant`: スクロールを単一のジャンプで即座に行う
* `auto`: スクロールの動作を `scroll-behavior` の計算値によって指定する


### 返値

なし (`undefined`)。

例
-


```js
element.scrollTo(0, 1000);
```


`options` を使用する場合:


```js
element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollto |

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

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

関連情報
----

* `Element.scrollTop`, `Element.scrollLeft`
* `Window.scrollTo()`
Element: scrollWidth プロパティ
==========================

**`Element.scrollWidth`** は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。

`scrollWidth` の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は `clientWidth` と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには `::before` または `::after` のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 `scrollWidth` は `clientWidth` と等しくなります。

**メモ:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 `element.getBoundingClientRect()` を使用してください。

値
-

文字列です。

例
-


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Example</title>
    <style>
 div {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 }

 #aDiv {
 width: 100px;
 }

 button {
 margin-bottom: 2em;
 }
 </style>
  </head>

  <body>
    <div id="aDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="aButton">Check for overflow</button>

    <div id="anotherDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="anotherButton">Check for overflow</button>
  </body>
  <script>
 const buttonOne = document.getElementById("aButton");
 const buttonTwo = document.getElementById("anotherButton");
 const divOne = document.getElementById("aDiv");
 const divTwo = document.getElementById("anotherDiv");

 //check to determine if an overflow is happening
 function isOverflowing(element) {
 return element.scrollWidth > element.offsetWidth;
 }

 function alertOverflow(element) {
 if (isOverflowing(element)) {
 alert("Contents are overflowing the container.");
 } else {
 alert("No overflows!");
 }
 }

 buttonOne.addEventListener("click", () => {
 alertOverflow(divOne);
 });

 buttonTwo.addEventListener("click", () => {
 alertOverflow(divTwo);
 });
 </script>
</html>
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollwidth |

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

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

関連情報
----

* `Element.clientWidth`
* `HTMLElement.offsetWidth`
* 要素の寸法の決定