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

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

**警告:** このイベントは仕様の初期バージョンでの提案でした。頼りにしないでください。

**`beforescriptexecute`** イベントは、スクリプトが実行しようとされているときに発生します。このイベントをキャンセルすると、スクリプトの実行が阻止されます。

これは Gecko (Firefox) 固有のイベントです。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

仕様書
---

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

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

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

関連情報
----

* `afterscriptexecute` イベント
Element: lastElementChild プロパティ
===============================

**`Element.lastElementChild`** は読み取り専用のプロパティで、要素の最後の子を `Element` で返します。子要素がない場合は `null` を返します。

`Element.lastElementChild` は要素ノードのみを含みます。
 テキストやコメントノードなど、要素以外のノードを含むすべての子ノードを取得するには、 `Node.lastChild` を使用してください。

値
-

`Element` オブジェクト、または `null` です。

例
-


```html
<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

<script>
 const list = document.getElementById("list");
 console.log(list.lastElementChild.textContent);
 // logs "Third (3)"
</script>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-lastelementchild① |

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

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

関連情報
----

* `Element.previousElementSibling`
* `Element.firstElementChild`
Element: pointerover イベント
=========================

`pointerover` イベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*このインターフェイスは `MouseEvent` および `Event` からプロパティを継承しています。*

`PointerEvent.pointerId` 読取専用 

イベントを発生させたポインターの固有の識別子です。

`PointerEvent.width` 読取専用 

ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用 

ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用 

ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用 

ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用 

Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用 

X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用 

ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用 

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用 

このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

例
-

`addEventListener()` を使用した例です。


```js
const para = document.querySelector("p");

para.addEventListener("pointerover", (event) => {
  console.log("Pointer moved in");
});
```


`onpointerover` イベントハンドラープロパティを使用した例です。


```js
const para = document.querySelector("p");

para.onpointerover = (event) => {
  console.log("Pointer moved in");
};
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointerover-event |
| Pointer Events # dom-globaleventhandlers-onpointerover |

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

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

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`
Element: ariaRelevant プロパティ
===========================

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

**`ariaRelevant`** は `Element` インターフェイスのプロパティで、`aria-relevant` (en-US) 属性の値を反映します。この属性は、ライブ領域内のアクセシビリティツリーが変更されたときにユーザーエージェントがどのような通知を発生させるかを示します。これは `aria-live` 領域内のどのような変更が関連性があり、告知されるべきかを記述するために使用します。

値
-

以下の値を 1 つ以上格納した文字列で、スペース区切りです。

`"additions"`

ライブ領域内の要素ノードの追加は、関連性があると考えるべきです。

`"removals"`

ライブ領域からのノードの削除は、関連性があると考えるべきです。

`"text"`

既存のノードのテキストコンテンツの変更は、関連性があるとみなされるべきです。

`"all"`

`"additions removals text"` に相当します。

例
-

この例では、IDが `text` の要素の `aria-relevant` (en-US) 属性は "all" に設定されています。ariaRelevant` を使用して値を "text" に更新します。


```html
<div
 id="clock"
 role="timer"
 aria-live="polite"
 aria-atomic="true"
 aria-relevant="all"></div>
```



```js
let el = document.getElementById("clock");
console.log(el.ariaRelevant); // all
el.ariaRelevant = "text";
console.log(el.ariaRelevant); // text
```

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

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

**`cut`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから「切り取り」操作を実行したときに発生します。

ユーザーが編集不可能なコンテンツに対して切り取りをしようとすると、`cut` イベントは発生しますが、イベントオブジェクトにはデータが入りません。

イベントの既定のアクションは、（もしあれば）選択範囲をクリップボードへコピーして文書からその部分を取り除くことです。

このイベントのハンドラーは、`setData(format, data)` をイベントの `ClipboardEvent.clipboardData` プロパティに対して呼び出すことで、クリップボードの内容を変更したり、`event.preventDefault()` を使用して既定の動作を取り消したりすることができます。

なお、既定の動作を取り消すと、文書の更新が阻止されます。そのため、「切り取り」の既定の動作をエミュレートしたい場合は、イベントハンドラーでクリップボードを操作するとともに、文書から選択範囲を手動で取り除かなければなりません。

このハンドラーがクリップボードのデータを*読み取る*ことはできません。

合成した `cut` イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。

構文
--

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


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

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

イベント型
-----

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

Event

ClipboardEvent例
-

### ライブデモ

#### HTML


```html
<div class="source" contenteditable="true">Cut text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
```


```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```


#### JS


```js
const source = document.querySelector("div.source");

source.addEventListener("cut", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  selection.deleteFromDocument();
  event.preventDefault();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

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

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

関連情報
----

* 関連イベント: `copy`, `paste`
* `Document` を対象としたこのイベント: `cut`
* `Window` を対象としたこのイベント: `cut`
Element: releasePointerCapture() メソッド
=====================================

**`releasePointerCapture()`** は `Element` インターフェイスのメソッドで、特定の（`PointerEvent` の）*ポインター*に対して以前に設定された*ポインターキャプチャ*を解放（停止）します。

*ポインターキャプチャ*の説明と特定の要素に設定する方法については、`Element.setPointerCapture()` メソッドを参照してください。

構文
--


```js
releasePointerCapture(pointerId)
```

### 引数

`pointerId`

`PointerEvent` オブジェクトの `pointerId`。

### 返値

なし (`undefined`)。

### 例外

| 例外 | 説明 |
| --- | --- |
| `InvalidPointerId` | pointerId がどのアクティブなポインターとも一致しない場合。 |

例
-

この例では、`<div>` を押下するとポインターキャプチャが設定されます。 これにより、ポインターをその境界の外側に移動した場合でも、要素を水平方向にスライドさせることができます。

### HTML


```html
<div id="slider">スライドしてね</div>
```

### CSS


```css
div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}
```

### JavaScript


```js
function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

const slider = document.getElementById("slider");

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;
```

### 結果

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-element-releasepointercapture |

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

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

関連情報
----

* `Element.setPointerCapture()`
* ポインターイベント
Element: MozMousePixelScroll イベント
=================================

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

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

Firefox 専用の、標準外、かつ廃止予定の **MozMousePixelScroll`** イベントは、マウスホイールなどが操作されたときに `Element` で非同期に発生します。これは `MouseScrollEvent` インターフェイスで表されます。

**メモ:** この標準外の旧式のイベントは使用しないでください。代わりに、常に標準の `wheel` イベントを使用してください。

構文
--

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


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

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

イベント型
-----

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

スクロールした距離の取得
------------

このイベントの `detail` プロパティは、スクロール距離を行単位で示します。負の値はスクロール移動が下方向か右方向であることを示し、正の値は上方向か左方向であることを示します。

プラットフォームのネイティブマウスホイールイベントが行またはページ単位でスクロール距離を示している場合、`detail` の値はその値と、ターゲット要素を含む最も近い祖先のスクロール可能要素の行の高さまたはページの幅/高さを使用して計算されます。

**メモ:** macOSでは、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。

イベントが正当なものであれば、`detail` の値が 0 になることはありません。

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

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

関連情報
----

* `MouseScrollEvent`
* Gecko の古い行またはページのスクロールイベント: `DOMMouseScroll`
* Gecko 以外のブラウザーの古いマウスホイールイベント: `mousewheel`
* 標準化されたホイールイベント: `wheel`
Element: namespaceURI プロパティ
===========================

**`Element.namespaceURI`** は読み取り専用のプロパティで、この要素の名前空間 URI を返します。この要素が名前空間に所属していない場合は `null` を返します。

値
-

文字列、または `null` です。

例
-

このスニペットでは、ある要素の `localName` と `namespaceURI` を調べます。この `namespaceURI` は XUL の名前空間を返し、`localName` は "browser" を返すので、このノードは XUL の `<browser/>` と解釈されます。


```js
if (
  element.localName === "browser" &&
  element.namespaceURI ===
    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
) {
  // これは XUL browser です
}
```

メモ
--

これは、スコープ内の名前空間宣言を調べて名前空間を検索した結果であり、計算値ではありません。ノードの名前空間 URI は、ノードの生成時に凍結されます。

HTML 文書中の HTML 要素の名前空間 URI は、XHTML と同様に `http://www.w3.org/1999/xhtml` となります。

指定された `namespaceURI` を持つ要素を生成する場合は、document.createElementNS() を用いることで実現できます。

DOM はそれ自体で名前空間の検証を行ったり強制したりすることはありません。必要な検証を行う作業は DOM アプリケーションに任されています。また、一度特定の要素に関連付けられた名前空間接頭辞は、変更することができないことに注意しましょう。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-namespaceuri① |

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

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

関連情報
----

* `Element.localName`
* `Element.prefix`
* `Attr.namespaceURI`
Element: setAttribute() メソッド
============================

指定された要素の属性の値を設定します。属性が既に存在する場合は値が更新され、そうでない場合は指定された名前と値で新しい属性が追加されます。

属性の現在の値を取得するには `getAttribute()` を、属性を削除するには `removeAttribute()` を呼び出します。

構文
--


```js
setAttribute(name, value)
```

### 引数

`name`

値を設定する属性名を指定する文字列です。HTML 文書内の HTML 要素で `setAttribute()` を呼び出すと、属性名は自動的にすべて小文字に変換されます。

`value`

属性に割り当てる値を含む文字列です。文字列以外の値が指定された場合は、自動的に文字列に変換されます。

論理属性は要素に存在すれば `true` とみなされます。`value` には、空文字列または属性名を、前後にホワイトスペースを置かずに指定してください。実践的ななデモは以下の例を参照してください。

指定された `value` は文字列に変換されるため、`null` を指定しても必ずしも期待通りになるとは限りません。属性を削除したり、その値を `null` に設定する代わりに、属性の値を文字列 `"null"` に設定します。属性を削除したい場合は、`removeAttribute()`を呼び出してください。

### 返値

なし (`undefined`)。

### 例外

`InvalidCharacterError` `DOMException`

指定された属性 `name` に、属性名として無効な文字が 1 文字以上含まれています。

例
-

次の例では、`setAttribute()` を使用して `<button>` に属性を設定しています。

### HTML


```html
<button>Hello World</button>
```


```
button {
  height: 30px;
  width: 100px;
  margin: 1em;
}
```

### JavaScript


```js
const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");
```

### 結果

これは 2 つのことを示しています。

* 最初の `setAttribute()` の呼び出しでは、`name` 属性の値を "helloButton" に変更しています。
 これはブラウザーのページインスペクター (Chrome, Edge,
 Firefox, Safari) を使用すると確認することができます。
* `disabled` のような論理属性の値を設定するには、任意の値を指定することができます。
 推奨される値は空の文字列か属性名です。
 重要なことは、属性が存在する場合、実際の値に関係なく、その値は `true` とみなされるということです。
 属性が存在しない場合、その値は `false` となります。`disabled` 属性の値を空文字列 (`""`) に設定することで、`disabled` を `true` に設定することになり、その結果ボタンは無効になります。

DOM メソッドは要素の属性を取り扱います。

| 名前空間に無関係、最も一般的に使用されるメソッド | 名前空間に限定される変数(DOM Level 2) | `Attr` ノードを直接扱う DOM レベル 1 のメソッド(ほとんど使用されない) | `Attr` ノードを直接扱う DOM レベル 2 名前空間に限定されるメソッド(ほとんど使用されない) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-setattribute① |

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

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

### Gecko のメモ

特定の属性、特に XUL の `value` を変更するために `setAttribute()` を使用すると、属性が既定値を指定するため、矛盾した動作をします。現在の値にアクセスしたり変更したりするには、プロパティを使用する必要があります。例えば、`Element.value` を `Element.setAttribute()` の代わりに使用してください。
Element: ariaPressed プロパティ
==========================

**`ariaPressed`** は `Element` インターフェイスのプロパティで、トグルボタンの現在の押下状態を示す `aria-pressed` (en-US) 属性の値を反映します。

**メモ:** 可能であれば、HTML の `<input>` 要素に `type="button"` を使用するか、`<button>` 要素を使用すると、意味づけが組み込まれており、ARIA 属性を持つ必要がありません。

値
-

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

`"true"`

この要素は押下状態にあります。

`"false"`

この要素は押されることに対応していますが、現在は押下状態にありません。

`"mixed"`

3 状態トグルボタンの混合モード値を示します。

`"undefined"`

この要素は押下状態に対応していません。

例
-

この例では、`saveChanges` という ID を持つ要素の `aria-pressed` 属性は "false" に設定されており、この入力は現在押されていないことを示しています。`ariaPressed` を使用して、値を "true" に更新します。


```html
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>
```



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

仕様書
---

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

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

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

関連情報
----

* ARIA: button ロール
Element: webkitmouseforcewillbegin イベント
=======================================

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

macOS 版の Safari は、標準外の **`webkitmouseforcewillbegin`** イベントを、最初の `mousedown` イベントを発生させる前に `Element` で発生させます。

クリックがタッチ圧力イベント (en-US)になった場合、既定のタッチ圧力アクションを起動しないようシステムに指示することができます。

ユーザーがタッチ圧力イベントをアクティブにするのに十分な圧力をかけた場合、既定のタッチ圧力アクションを実行しないように macOS に指示するには、`preventDefault()` を `webkitmouseforcewillbegin` イベントオブジェクトで呼び出してください。

**`webkitmouseforcewillbegin`** は WebKit 固有のイベントです。これはタッチ圧力イベント (en-US)機能の一部です。

構文
--

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


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

onwebkitmouseforceup = (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` の別名です。

仕様書
---

*どの仕様書にも含まれていません。* Apple は Mac Developer Library で説明しています。

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

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

関連情報
----

* イベントの紹介
* タッチ圧力イベント (en-US)
* `webkitmouseforcedown`
* `webkitmouseforceup`
* `webkitmouseforcechanged`
Element: setCapture() メソッド
==========================

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

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

mousedown イベントの処理中にこのメソッドを呼び出すと、マウスボタンが離されるか `document.releaseCapture()` が呼び出されるまで、この要素にすべてのマウスイベントを捕捉します。

**警告:** このインターフェイスにはブラウザー間の対応がほとんどありませんでした。おそらくお探しのものは `element.setPointerCapture` （ポインターイベント API）でしょう。

構文
--


```js
setCapture(retargetToElement)
```

### 引数

`retargetToElement`

もし `true` ならば、すべてのイベントはこの要素に直接向けられます。もし `false` ならば、イベントはこの要素の子孫にも発行されることがあります。

### 返値

なし (`undefined`)。

例
-

この例では、現在のマウスの座標が、要素をクリックして押した後にマウスを移動しながら描画されます。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Mouse Capture Example</title>
    <style>
 #myButton {
 border: solid black 1px;
 color: black;
 padding: 2px;
 box-shadow: black 2px 2px;
 }
 </style>

    <script>
 function init() {
 const btn = document.getElementById("myButton");
 if (btn.setCapture) {
 btn.addEventListener("mousedown", mouseDown, false);
 btn.addEventListener("mouseup", mouseUp, false);
 } else {
 document.getElementById("output").textContent =
 "Sorry, there appears to be no setCapture support on this browser";
 }
 }

 function mouseDown(e) {
 e.target.setCapture();
 e.target.addEventListener("mousemove", mouseMoved, false);
 }

 function mouseUp(e) {
 e.target.removeEventListener("mousemove", mouseMoved, false);
 }

 function mouseMoved(e) {
 const output = document.getElementById("output");
 output.textContent = `Position: ${e.clientX}, ${e.clientY}`;
 }
 </script>
  </head>
  <body onload="init()">
    <p>
      This is an example of how to use mouse capture on elements in Gecko 2.0.
    </p>
    <p><a id="myButton" href="#">Test Me</a></p>
    <div id="output">No events yet</div>
  </body>
</html>
```


ライブ例を表示

メモ
--

他の要素のレイアウトによっては、完全に上下にスクロールされない場合があります。

仕様書
---

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

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

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

関連情報
----

* `document.releaseCapture()`
* `element.setPointerCapture`
Element: focusin イベント
=====================

**`focusin`** イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと `focus` との主な違いは、 `focusin` がバブリングを行うのに対し `focus` は行わないことです。

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

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

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用してください。


```js
addEventListener("focusin", (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 form = document.getElementById("form");

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

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


#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-focusin |

**メモ:** *UI Events* 仕様書ではフォーカスイベントの順序を記述していますが、現在のブラウザーの実装とは異なります。

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

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

関連情報
----

* 関連イベント: `blur`, `focus`, `focusout`
* Focusing: focus/blur
Element: touchmove イベント
=======================

`touchmove` イベントは、タッチ面上で 1 つ以上のタッチ点が移動したときに発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

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

*このインターフェイスは `UIEvent` および `Event` からプロパティを継承しています。*

`TouchEvent.altKey` 読取専用 

論理値で、タッチイベントが発行されたときに alt キーが押されていたかどうかを示します。

`TouchEvent.changedTouches` 読取専用 

前回のタッチイベントと今回のタッチイベントの間で状態が変化した、個々の接点を表すすべての `Touch` オブジェクトの `TouchList` です。

`TouchEvent.ctrlKey` 読取専用 

論理値で、タッチイベントが発行されたときにコントロールキーが押されていたかどうかを示します。

`TouchEvent.metaKey` 読取専用 

論理値で、タッチイベントが発行されたときにメタキーが押されていたかどうかを示します。

`TouchEvent.shiftKey` 読取専用 

論理値で、タッチイベントが発行されたときにシフトキーが押されていたかどうかを示します。

`TouchEvent.targetTouches` 読取専用 

現在タッチ面に接触してしており、**かつ**イベントのターゲット要素と同じ要素で開始された、すべての `Touch` オブジェクトの `TouchList` です。

`TouchEvent.touches` 読取専用 

対象や、変更されたステータスに関係なく、表面との現在の接点をすべて表す `Touch` オブジェクトの `TouchList` です。

`TouchEvent.rotation` 
Non-standard
 読取専用 

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

`TouchEvent.scale` 
Non-standard
 読取専用 

イベント開始時からの 2 つの指間の距離の変化です。イベント開始時の初期指間距離からの倍率を、浮動小数点数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 以上の値は、外側へのピンチ解除（ズームイン）を示します。初期値は `1.0` です。

例
-

これらのイベントのコード例は、専用のページ「タッチイベント」にあります。

仕様書
---

| Specification |
| --- |
| Touch Events # event-touchmove |
| Touch Events # dom-globaleventhandlers-ontouchmove |

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

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

関連情報
----

* タッチイベント
* `mousemove`