recursal/MDN huggingface dataset:
IDBCursor.delete()
==================

`IDBCursor` インターフェイスの **`delete()`** メソッドは、`IDBRequest` オブジェクトを返し、別のスレッドで、カーソルの位置を変えずにカーソルが指しているレコードを削除します。レコードが削除されると、カーソルの値は `null` になります。

注意点として、`IDBIndex.openKeyCursor()` で取得したカーソルでは `delete()` (や `IDBCursor.update()`) を呼ぶことはできません。このような用途のためには、かわりに `IDBIndex.openCursor()` を使用しないといけません。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
delete()
```

### 引数

なし

### 返値

この操作に関して続くイベントが発火する `IDBRequest` オブジェクト。`result` 属性は `undefined` になります。

### 例外

このメソッドは、以下の種類の `DOMException` を発生させる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBCursor` のトランザクションが活性状態でないとき投げられます。

`ReadOnlyError` `DOMException`

トランザクションが読み取り専用モードのとき投げられます。

`InvalidStateError` `DOMException`

カーソルが `IDBindex.openKeyCursor` により作成されたか、現在反復中であるか、終わりまで反復済みであるとき投げられます。

例
-

このシンプルな断片ではトランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。カーソルが指しているレコードの `albumTitle` が `"Grace under pressure"` である場合、`const request = cursor.delete();` によりそのレコード全体を削除します。

カーソルを使用する場合、キーによりデータを選択する必要は無く、単に全てを取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが指しているレコードのデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)


```js
function deleteResult() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readwrite");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      if (cursor.value.albumTitle === "Grace under pressure") {
        const request = cursor.delete();
        request.onsuccess = () => {
          console.log(
            "Deleted that mediocre album from 1984. Even Power windows is better.",
          );
        };
      } else {
        const listItem = document.createElement("li");
        listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
        list.appendChild(listItem);
      }
      cursor.continue();
    } else {
      console.log("エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-delete① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBCursor.update()
==================

`IDBCursor` インターフェイスの **`update()`** メソッドは、`IDBRequest` オブジェクトを返し、別のスレッドで、オブジェクトストア内のカーソルが現在指している値を更新します。カーソルが削除したばかりのレコードを指している場合は、新しいレコードが作成されます。

注意点として、`IDBIndex.openKeyCursor()` で取得したカーソルで `update()` (や `IDBCursor.delete()`) を呼ぶことはできません。このような用途のためには、かわりに `IDBIndex.openCursor()` を使わなければなりません。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
update(value)
```

### 引数

`value`

現在の位置に保存する新しい値です。

### 返値

この操作に関する続くイベントが発火する `IDBRequest` オブジェクトです。

### 例外

このメソッドは、以下の種類の `DOMException` を発生させる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBCursor` のトランザクションが活性状態でないとき投げられます。

`ReadOnlyError` `DOMException`

トランザクションが読み取り専用モードであるとき投げられます。

`InvalidStateError` `DOMException`

カーソルが `IDBindex.openKeyCursor` により作成されたか、現在反復中であるか、最後まで反復済みであるとき投げられます。

`DataError` `DOMException`

操作対象のオブジェクトストアがインラインキーを使用しており、オブジェクトストアのキーパスで指定された値のプロパティがこのカーソルの位置のキーと一致しないとき投げられます。

`DataCloneError` `DOMException`

保存しようとしたデータが、内部の構造化複製アルゴリズムで複製できなかったとき投げられます。

例
-

このシンプルな断片では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。カーソルが現在指しているレコードの `albumTitle` が `"A farewell to kings"` である場合、`const request = cursor.update();` を用いてアルバムのリリース年を更新します。

なお、データの完全性が破壊されるため、`cursor.update()` により主キーを変更することはできません。そのため、アルバムのタイトルは変更していません。このような場合、レコード全体を削除し、`IDBObjectStore.add` により新しいレコードを追加する必要があるでしょう。また、更新の呼び出しに直接 `cursor.value` を使うことはできません。そのため、以下の例では作業用に変数 `updateData` を使用しています。

カーソルを用いる場合、データをキーで選択する必要は無く、単に全てを取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが現在指しているレコードのデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)


```js
function updateResult() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readwrite");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      if (cursor.value.albumTitle === "A farewell to kings") {
        const updateData = cursor.value;

        updateData.year = 2050;
        const request = cursor.update(updateData);
        request.onsuccess = () => {
          console.log("アルバムの年の改善？");
        };
      }

      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);
      cursor.continue();
    } else {
      console.log("エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-update① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBCursor.source
================

`IDBCursor` インターフェイスの読み取り専用プロパティ **`source`** は、カーソルが反復している対象の `IDBObjectStore` または `IDBIndex` を返します。この関数は、カーソルが反復中であっても、最後まで反復した後であっても、トランザクションが実行中でなくても、`null` を返したり例外を投げたりすることはありません。

**注:** この機能は Web Worker 内で利用可能です

値
-

カーソルが反復している対象の `IDBObjectStore` または `IDBIndex` です。

例
-

このシンプルな断片では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを使用してオブジェクトストア内の全レコードを走査します。それぞれの繰り返しにおいて、カーソルの反復元を記録します。これにより、たとえば以下のような `IDBobjectStore` オブジェクトがコンソールに記録されます。


```json
IDBObjectStore {autoIncrement: false, transaction: IDBTransaction, indexNames: DOMStringList, keyPath: "albumTitle", name: "rushAlbumList"…}
```


カーソルを使う場合、データをキーで選択する必要はなく、単に全部取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが指している現在のレコードからデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)


```js
function displayData() {
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

      console.log(cursor.source);
      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-source① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBCursor.continuePrimaryKey()
==============================

`IDBCursor` インターフェイスの **`continuePrimaryKey()`** メソッドは、カーソルを、キーが引数として指定するキーと一致し、かつ主キーが引数として指定する主キーと一致するアイテムに進めます。

典型的な使用例は、キーを 1 個ずつ比較することなく、前に使用したカーソルが閉じた場所から反復を再開することです。

新しいカーソルのデータを読み込む前にこのメソッドを複数回呼び出す (たとえば、同じ `onsuccess` ハンドラーで `continuePrimaryKey()` を 2 回呼び出す) と、カーソルの値を得たフラグがクリアされているため、2 回目の呼び出しで `InvalidStateError` 例外が投げられます。

このメソッドは、インデックスを対象とするカーソルでのみ有効です。オブジェクトストアを対象とするカーソルで使うと、エラーが投げられます。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
continuePrimaryKey(key, primaryKey)
```

### 引数

`key`

カーソルの位置を設定したいキーです。

`primaryKey`

カーソルの位置を設定したい主キーです。

### 返値

なし (`undefined`)

### 例外

このメソッドは、以下の種類の `DOMException` を発生させる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBCursor` のトランザクションが活性状態でないとき投げられます。

`DataError` `DOMException`

引数のキーが以下の条件のいずれかを満たすとき投げられます。

* キーが有効でない
* キーがカーソルの位置以下であり、かつカーソルの方向が `next` または `nextunique` である
* キーがカーソルの位置以上であり、かつカーソルの方向が `prev` または `prevunique` である

`InvalidStateError` `DOMException`

カーソルが現在反復中であるか、最後まで反復済みであるとき投げられます。

`InvalidAccessError` `DOMException`

カーソルの方向が `prev` でも `next` でもないとき投げられます。

例
-

以下のようにすると、前回の訪問から `"javascript"` のタグがついた全記事に対する反復を再開できます。


```js
let request = articleStore.index("tag").openCursor();
let count = 0;
let unreadList = [];
request.onsuccess = (event) => {
  let cursor = event.target.result;
  if (!cursor) {
    return;
  }
  let lastPrimaryKey = getLastIteratedArticleId();
  if (lastPrimaryKey > cursor.primaryKey) {
    cursor.continuePrimaryKey("javascript", lastPrimaryKey);
    return;
  }
  // lastIteratedArticleId を更新する
  setLastIteratedArticleId(cursor.primaryKey);
  // unreadList に 5 本の記事を追加しておく
  unreadList.push(cursor.value);
  if (++count < 5) {
    cursor.continue();
  }
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-continueprimarykey① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBCursor.request
=================

`IDBCursor` インターフェイスの読み取り専用プロパティ **`request`** は、カーソルを取得するために使用された `IDBRequest` を返します。

**注:** この機能は Web Worker 内で利用可能です

値
-

`IDBRequest` のオブジェクトインスタンスです。

例
-

カーソルを開くと、そのカーソルがどの要求オブジェクトに由来するかを表す `request` プロパティがそのカーソルオブジェクトで使用可能になります。以下が例です。


```js
function displayData() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  const request = objectStore.openCursor();

  request.onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);
      console.log(cursor.request);
      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-request① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBCursor.continue()
====================

**`continue()`** は `IDBCursor` インターフェースのメソッドで、カーソルを現在の方向に次の位置、任意のキーパラメーターに一致するキーを持つアイテムまで進めます。キーを指定しない場合、カーソルはその方向に基づいて、すぐ隣の位置へ進みます。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
cursor.continue(key);
```

### 引数

`key` 省略可

カーソルを進めるためのキーです。

### 例外

このメソッドは次の内いずれかの `DOMException` を発生させることがあります。

| 例外 | 解説 |
| --- | --- |
| `TransactionInactiveError` | この `IDBCursor` のトランザクションがアクティブではありません。 |
| `DataError` | キーパラメーターが以下の状態のうちのいずれかである可能性があります。* キーが妥当なキーではない
* キーがこのカーソルの位置と同じかそれより小さく、カーソルの方向が
 `next` または `nextunique` である
* キーがこのカーソルの位置と同じかそれより大きく、カーソルの方向が
 `prev` または `prevunique` である
 |
| `InvalidStateError` | カーソルが現在走査中または末尾を越えて走査しました。 |

例
-

この単純で部分的な実例ではトランザクションを作り、オブジェクトストアを取得した後、オブジェクトストア内の全ての反復処理するためカーソルを使用しています。カーソルはキーに基づいてデータを選択するには必要ありません。その全てを捕らえることができます。また、それぞれのループ内での繰り返しでカーソルオブジェクトを用い、`cursor.value.foo` とすることで、現在のレコードからカーソルの下のデータを取得できることには注目です。完全な例については IDBCursor の例 (ライブデモを見る) を参照してください。


```js
function displayData() {
  var transaction = db.transaction(["rushAlbumList"], "readonly");
  var objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML = cursor.value.albumTitle + ", " + cursor.value.year;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-continue① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始 : `IDBDatabase`
* トランザクションを使う : `IDBTransaction`
* キーの範囲設定 : `IDBKeyRange`
* データの取得と変更 : `IDBObjectStore`
* カーソルを使う : `IDBCursor`
* リファレンス 実例 : To-do Notifications (動く例を見る)
IDBCursor.direction
===================

`IDBCursor` インターフェイスの読み取り専用プロパティ **`direction`** は、(たとえば `IDBObjectStore.openCursor` で設定した) カーソルの走査の方向を表す文字列です。取りうる値は、以下の値の節を参照してください。

**注:** この機能は Web Worker 内で利用可能です

値
-

カーソルがデータを走査する方向を表す文字列です。以下の値を取りえます。

`next`

この方向は、カーソルを走査対象の最初で開きます。

`nextunique`

この方向は、カーソルを走査対象の最初で開きます。重複した値を持つキーについては、最初のレコードのみを返します。

`prev`

この方向は、カーソルを走査対象の最後で開きます。

`prevunique`

この方向は、カーソルを走査対象の最後で開きます。重複した値を持つキーについては、最初のレコードのみを返します。

例
-

このシンプルな断片では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを使用してオブジェクトストア内の全レコードを走査します。それぞれの繰り返しにおいて、たとえば以下のようなカーソルの方向を記録します。
```

prev
```


**メモ:** `direction` プロパティは読み取り専用なので、このプロパティを用いてカーソルが動く方向を変えることはできません。カーソルが動く方向は、`IDBObjectStore.openCursor` の第 2 引数で設定します。

カーソルを使う場合、データをキーで選択する必要はなく、単に全て取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが指している現在のレコードからデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)


```js
function backwards() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor(null, "prev").onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

      console.log(cursor.direction);
      cursor.continue();
    } else {
      console.log("エントリーを逆向きに表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-direction① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBCursor.key
=============

`IDBCursor` の読み取り専用プロパティ **`key`** は、カーソルが指しているレコードのキーを返します。カーソルが範囲外の場合は `undefined` になります。カーソルのキーは任意のデータ型になり得ます。

**注:** この機能は Web Worker 内で利用可能です

値
-

任意のデータ型の値です。

例
-

このシンプルな断片では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。それぞれの繰り返しにおいて、以下のようなカーソルのキーを記録します。(キーである、それぞれの場合ごとのアルバムのタイトルです)

カーソルを用いる場合、データをキーで選択する必要はなく、単に全て取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが指している現在のオブジェクトからデータを `cursor.value.foo` のようにして取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)


```js
function displayData() {
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

      console.log(cursor.key);
      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-key① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBCursor.advance()
===================

`IDBCursor` インターフェイスの **`advance()`** メソッドはカーソルが位置を前進させる回数をセットします。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
cursor.advance(count);
```

### 引数

`count`

カーソルが前進する回数

### 返値

`undefined`### 例外

このメソッドは次のいずれかの `DOMException` を発生することがあります:

| 例外 | 説明 |
| --- | --- |
| `TransactionInactiveError` | この `IDBCursor` のトランザクションは活性化していません。 |
| `TypeError` | `count` パラメーターに渡された値がゼロや負の数です。 |
| `InvalidStateError` | カーソルは現在繰り返し中か、最後を過ぎています。 |

例
-

このシンプルな断片でトランザクションを作成し、オブジェクトストアを取得し、オブジェクトストアのレコードを一通り繰り返すカーソルを使っています。ここで `cursor.advance(2)` を使ってそれぞれ 2 回前進していて、つまり 1 つおきの結果だけが表示されます。`advance()` は `IDBCursor.continue` と同様に動作しますが、常に次のレコードに移動するのでなく、一度に複数のレコードを飛び越えられるのが違います。

注意点としてループの繰り返しで、カーソルオブジェクトの現在のレコードのテータを `cursor.value.foo`を使って取得できます。完全な動作例は、IDBCursor の例(ライブ例を見る)を見てください。


```js
function advanceResult() {
  list.innerHTML = "";
  var transaction = db.transaction(["rushAlbumList"], "readonly");
  var objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML =
        "<strong>" +
        cursor.value.albumTitle +
        "</strong>, " +
        cursor.value.year;
      list.appendChild(listItem);
      cursor.advance(2);
    } else {
      console.log("全エントリーを 1 つおきに表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-advance① |

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

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

関連情報
----

* IndexedDB を使用する
* トランザクションを開始する : `IDBDatabase`
* トランザクションを使用する : `IDBTransaction`
* キーレンジを設定する : `IDBKeyRange`
* データの取得と変更 : `IDBObjectStore`
* カーソルを使用する : `IDBCursor`
* リファレンスの例 : To-do Notifications (ライブ例を見る)
Event: type プロパティ
=================

**`type`** は `Event` インターフェイスの読み取り専用プロパティで、イベントの種別を表す文字列を返します。イベントが構築されると設定され、この名前は `click`, `load`, `error` のような特定のイベントを参照するためによく使用されます。

値
-

`Event` の種別を表す文字列です。

例
-

この例は、キーボードのキーを押すか、マウスボタンをクリックするとイベント種別をログに出力します。

### HTML


```html
<p>キーを押すか、マウスをクリックしてください。</p>
<p id="log"></p>
```

### JavaScript


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

// キーボードイベント
document.addEventListener("keydown", getEventType, false); // first
document.addEventListener("keypress", getEventType, false); // second
document.addEventListener("keyup", getEventType, false); // third

// マウスイベント
document.addEventListener("mousedown", getEventType, false); // first
document.addEventListener("mouseup", getEventType, false); // second
document.addEventListener("click", getEventType, false); // third
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `EventTarget.addEventListener()`
* `EventTarget.removeEventListener()`
Event: cancelBubble プロパティ
=========================

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

**`cancelBubble`** は `Event` インターフェイスのプロパティで、非推奨です。代わりに `Event.stopPropagation()` を使用してください。
 イベントハンドラーから戻る前にこの値を `true` に設定すると、イベントの伝播を防ぐことができます。それ以降の実装では、この値を `false` に設定しても何も起こりません。
 詳しくはブラウザーの互換性を参照してください。

値
-

論理値です。 `true` の値は、イベントがこれ以上伝播しないことを意味します。

例
-


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

仕様書
---

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

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

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

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

**`explicitOriginalTarget`** は `Event` インターフェイスの読み取り専用プロパティで、このイベントの無名ではない元のターゲットを返します。

イベントが無名境界通過以外の何らかの理由で再ターゲットされた場合、再ターゲットが発生する前にターゲットに設定されます。

例えば、マウスイベントがテキストノードの上で発生した場合、その親ノードに再ターゲットされます（Webkit バグ 185889 参照）。この場合、 `currentTarget` は親ノードを表示し、このプロパティはテキストノードを表示することになります。

このプロパティは `originalTarget` とも異なり、無名のコンテンツを含むことはありません。

値
-

`EventTarget` オブジェクトを返します。ない場合は null を返します。

例
-

このプロパティは `<command>` と共に使用すると、コマンドを呼び出した元のオブジェクトのイベントの詳細を取得することができます。


```js
function myCommand(ev) {
  alert(ev.explicitOriginalTarget.nodeName); // returns 'menuitem'
}
```



```xml
<xul:command id="my-cmd-anAction" oncommand="myCommand(event);"/>

<xul:menulist>
  <xul:menupopup>
    <xul:menuitem label="Get my element name!" command="my-cmd-anAction"/>
  </xul:menupopup>
</menulist>
```

仕様書
---

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

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

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

関連情報
----

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

**`stopImmediatePropagation()`** は `Event` インターフェイスのメソッドで、呼び出されている同じイベントの他のリスナーを抑止します。

同じ要素で、同じ種類のイベントに複数のリスナーが装着されている場合、追加された順番に呼び出されます。もし、そのような呼び出しの最中に `stopImmediatePropagation()` が呼び出された場合、残りのリスナーは呼び出されなくなります。

構文
--


```js
event.stopImmediatePropagation()
```

例
-

### イベントを停止する関数の比較

下の例では、3 つの入れ子になった div の中に 3 つのボタンがあります。それぞれのボタンにはクリックイベント用に登録された 3 つのイベントリスナーがあり、それぞれの div にもクリックイベント用に登録されたイベントリスナーがあります。

* 一番上のボタンは、通常のイベント伝播が可能です。
* 中央のボタンは、最初のイベントハンドラーで `stopPropagation()` を呼び出します。
* 一番下のボタンは、最初のイベントハンドラーで `stopImmediatePropagation()` を呼び出します。

#### HTML


```html
<h2>ボタンをクリックしてください</h2>
<div>
  外側の div<br />
  <div>
    中央の div<br />
    <div>
      内側の div<br />
      <button>伝播可能</button><br />
      <button id="stopPropagation">伝播を停止</button><br />
      <button id="stopImmediatePropagation">直ちに伝播を停止</button>
    </div>
  </div>
</div>
<pre></pre>
```


#### CSS


```css
div {
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 2px solid #000;
  margin: 10px;
}

button {
  width: 100px;
  color: #008;
  padding: 5px;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 30px;
  margin: 5px;
}
```


#### JavaScript


```js
const outElem = document.querySelector("pre");

/\* Clear the output \*/
document.addEventListener(
  "click",
  () => {
    outElem.textContent = "";
  },
  true,
);

/\* Set event listeners for the buttons \*/
document.querySelectorAll("button").forEach((elem) => {
  for (let i = 1; i <= 3; i++) {
    elem.addEventListener("click", (evt) => {
      /\* 最初のイベントハンドラーですべての伝播を停止 \*/
      if (i === 1 && elem.id) {
        evt[elem.id]();
        outElem.textContent += `イベント 1 のイベントハンドラーが ${elem.id}() を呼び出しました\n`;
      }

      outElem.textContent += `"${elem.textContent}" ボタンのクリックイベント ${i} が処理されました\n`;
    });
  }
});

/\* それぞれの div にイベントリスナーを設定 \*/
document
  .querySelectorAll("div")
  .forEach((elem) =>
    elem.addEventListener(
      "click",
      (evt) =>
        (outElem.textContent += `"${elem.firstChild.data.trim()}" でクリックイベントが処理されました\n`),
    ),
  );
```


#### 結果

それぞれのクリックイベントハンドラーは、呼び出されるとステータスメッセージを表示します。中央のボタンを押すと、`stopPropagation()` によって、そのボタンがクリックされたときに登録されたイベントハンドラはすべて実行されますが、その後に続くはずの div のクリックイベントハンドラーは実行されないことがわかります。しかし、一番下のボタンを押すと、`stopImmediatePropagation()` はそのイベント以降の伝播をすべて停止します。

仕様書
---

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

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

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