From 8bc5865a59fbcfed90a1cf059fa328c92f0ae43f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 30 Jan 2022 22:46:53 +0900 Subject: イベントリファレンスの文書を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../creating_and_triggering_events/index.html | 151 --- .../events/creating_and_triggering_events/index.md | 151 +++ .../events/detecting_device_orientation/index.html | 234 ----- .../events/detecting_device_orientation/index.md | 234 +++++ files/ja/web/events/event_handlers/index.html | 96 -- files/ja/web/events/event_handlers/index.md | 96 ++ files/ja/web/events/index.html | 1081 -------------------- files/ja/web/events/index.md | 1081 ++++++++++++++++++++ .../index.html | 83 -- .../orientation_and_motion_data_explained/index.md | 83 ++ 10 files changed, 1645 insertions(+), 1645 deletions(-) delete mode 100644 files/ja/web/events/creating_and_triggering_events/index.html create mode 100644 files/ja/web/events/creating_and_triggering_events/index.md delete mode 100644 files/ja/web/events/detecting_device_orientation/index.html create mode 100644 files/ja/web/events/detecting_device_orientation/index.md delete mode 100644 files/ja/web/events/event_handlers/index.html create mode 100644 files/ja/web/events/event_handlers/index.md delete mode 100644 files/ja/web/events/index.html create mode 100644 files/ja/web/events/index.md delete mode 100644 files/ja/web/events/orientation_and_motion_data_explained/index.html create mode 100644 files/ja/web/events/orientation_and_motion_data_explained/index.md diff --git a/files/ja/web/events/creating_and_triggering_events/index.html b/files/ja/web/events/creating_and_triggering_events/index.html deleted file mode 100644 index cfa49f9c46..0000000000 --- a/files/ja/web/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: イベントの作成と起動 -slug: Web/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - JavaScript - - NeedsContent - - events -translation_of: Web/Events/Creating_and_triggering_events -original_slug: Web/Events/Creating_and_triggering_events ---- -

この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。

- -

カスタムイベントを作成する

- -

イベントは、次のように Event コンストラクターを使用して作成できます。

- -
const event = new Event('build');
-
-// Listen for the event.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// Dispatch the event.
-elem.dispatchEvent(event);
- -

上記のコード例は EventTarget.dispatchEvent() メソッドを使用します。

- -

このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の古い方法を参照して下さい。

- -

カスタムデータの追加 – CustomEvent()

- -

イベントオブジェクトにデータを追加するには、CustomEvent インターフェイスが存在し、detail プロパティを使用してカスタムデータを渡すことができます。

- -

たとえば、イベントは次のように作成できます。

- -
const event = new CustomEvent('build', { detail: elem.dataset.time });
- -

これにより、イベントリスナー内の追加データにアクセスすることができます。

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

古い方法

- -

イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。

- -
// イベントの作成
-const event = document.createEvent('Event');
-
-// イベントの名前を 'build' と定義する
-event.initEvent('build', true, true);
-
-// イベントを待ち受けする
-elem.addEventListener('build', function (e) {
-  // e.target が elem と一致したとき
-}, false);
-
-// 対象が何らかの Element またはその他の EventTarget の場合
-elem.dispatchEvent(event);
-
-
- -

イベントのバブリング

- -

子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// 新しいイベントを生成し、バブリングを許可し、 "detail" プロパティに渡したいデータを設定する
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () => textarea.value }
-});
-
-// フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-// ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
-textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
-
- -

イベントの動的な生成と処理

- -

要素はまだ作成されていないイベントを待ち受けすることができます。

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // Create and dispatch/trigger an event on the fly
-  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
-});
-
- -

ビルトインイベントの起動

- -

この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。デモを見る。

- -
function simulateClick() {
-  const event = new MouseEvent('click', {
-    view: window,
-    bubbles: true,
-    cancelable: true
-  });
-  const cb = document.getElementById('checkbox');
-  const cancelled = !cb.dispatchEvent(event);
-
-  if (cancelled) {
-    // A handler called preventDefault.
-    alert("cancelled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not cancelled");
-  }
-}
- -

関連情報

- - - - diff --git a/files/ja/web/events/creating_and_triggering_events/index.md b/files/ja/web/events/creating_and_triggering_events/index.md new file mode 100644 index 0000000000..cfa49f9c46 --- /dev/null +++ b/files/ja/web/events/creating_and_triggering_events/index.md @@ -0,0 +1,151 @@ +--- +title: イベントの作成と起動 +slug: Web/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - JavaScript + - NeedsContent + - events +translation_of: Web/Events/Creating_and_triggering_events +original_slug: Web/Events/Creating_and_triggering_events +--- +

この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。

+ +

カスタムイベントを作成する

+ +

イベントは、次のように Event コンストラクターを使用して作成できます。

+ +
const event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { /* ... */ }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);
+ +

上記のコード例は EventTarget.dispatchEvent() メソッドを使用します。

+ +

このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の古い方法を参照して下さい。

+ +

カスタムデータの追加 – CustomEvent()

+ +

イベントオブジェクトにデータを追加するには、CustomEvent インターフェイスが存在し、detail プロパティを使用してカスタムデータを渡すことができます。

+ +

たとえば、イベントは次のように作成できます。

+ +
const event = new CustomEvent('build', { detail: elem.dataset.time });
+ +

これにより、イベントリスナー内の追加データにアクセスすることができます。

+ +
function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+
+ +

古い方法

+ +

イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。

+ +
// イベントの作成
+const event = document.createEvent('Event');
+
+// イベントの名前を 'build' と定義する
+event.initEvent('build', true, true);
+
+// イベントを待ち受けする
+elem.addEventListener('build', function (e) {
+  // e.target が elem と一致したとき
+}, false);
+
+// 対象が何らかの Element またはその他の EventTarget の場合
+elem.dispatchEvent(event);
+
+
+ +

イベントのバブリング

+ +

子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// 新しいイベントを生成し、バブリングを許可し、 "detail" プロパティに渡したいデータを設定する
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () => textarea.value }
+});
+
+// フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+// ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+
+ +

イベントの動的な生成と処理

+ +

要素はまだ作成されていないイベントを待ち受けすることができます。

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
+});
+
+ +

ビルトインイベントの起動

+ +

この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。デモを見る。

+ +
function simulateClick() {
+  const event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  const cb = document.getElementById('checkbox');
+  const cancelled = !cb.dispatchEvent(event);
+
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+ +

関連情報

+ + + + diff --git a/files/ja/web/events/detecting_device_orientation/index.html b/files/ja/web/events/detecting_device_orientation/index.html deleted file mode 100644 index 8b3ba1f82f..0000000000 --- a/files/ja/web/events/detecting_device_orientation/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: デバイスの方向の検出 -slug: Web/Events/Detecting_device_orientation -tags: - - API - - Device Orientation - - Firefox OS - - Intermediate - - Mobile - - Motion - - Orientation - - Reference - - WebAPI -translation_of: Web/Events/Detecting_device_orientation -original_slug: Web/Events/Detecting_device_orientation ---- -
{{SeeCompatTable}}
- -

Web を利用可能なデバイスは、自身の方向を特定できるようになってきました。つまりデバイスは、重力との関係による自身の向きの変化を示すデータを報告できます。特に携帯電話のようなハンドヘルドデバイスは、表示内容が直立し続けるよう自動的に回転させるためにこの情報を使用でき、画面の幅が高さより大きくなるようにデバイスを回転させたときは、Web コンテンツをワイドスクリーン表示にします。

- -

方向の情報を制御する JavaScript イベントが 2 つあります。ひとつは {{domxref("DeviceOrientationEvent")}} であり、加速度センサーがデバイスの方向の変化を検出したときに発生します。Orientation イベントが報告するデータを受け取って処理することで、ユーザがデバイスを動かすことによる方向や高さの変化に対してインタラクティブに応答できるようになります。

- -

もうひとつのイベントは {{domxref("DeviceMotionEvent")}} であり、加速度が変化したときに発生します。こちらは方向ではなく加速度の変化を監視することが、{{domxref("DeviceOrientationEvent")}} との違いです。一般的に {{domxref("DeviceMotionEvent")}} を検出できるセンサーには、可動部があるストレージ装置を保護するためラップトップパソコンに内蔵するものも含みます。{{domxref("DeviceOrientationEvent")}} は、モバイルデバイスでとても一般的です。

- -

orientation イベントを処理する

- -

方向の変化を受け取り始めるには、{{event("deviceorientation")}} イベントをリッスンします:

- -
-

注記

-

parallax は、モバイルデバイスの加速度センサーやジャイロスコープのデータを正規化するためのポリフィルです。これは、デバイスの方向のサポート状況の違いを克服するのに役立ちます。

-
- -
window.addEventListener("deviceorientation", handleOrientation, true);
-
- -

イベントリスナ (この例では handleOrientation() という名前の JavaScript 関数) を登録すると、リスナ関数は最新の方向データとともに、周期的に呼び出されます。

- -

Orientation イベントは 4 つの値を持ちます:

- - - -

イベントハンドラ関数は以下のようなものです:

- -
function handleOrientation(event) {
-  var absolute = event.absolute;
-  var alpha    = event.alpha;
-  var beta     = event.beta;
-  var gamma    = event.gamma;
-
-  // 新たな方向データに基づいて処理を行う
-}
-
- -

方向として示される値

- -

それぞれの軸で報告される値は、標準座標系の軸を中心にした回転量を表します。これらは方向および動きとして示されるデータの記事で詳しく説明しており、ここでは概要を記載します。

- - - -

例

- -

このサンプルは方向を検出可能なデバイス上で、{{event("deviceorientation")}} イベントをサポートするブラウザを実行する場合に動作します。

- -

庭にボールがあると考えます:

- -
<div class="garden">
-  <div class="ball"></div>
-</div>
-
-<pre class="output"></pre>
-
- -

庭の幅は 200 ピクセルであり (小さな庭です)、ボールは中心にあります:

- -
.garden {
-  position: relative;
-  width : 200px;
-  height: 200px;
-  border: 5px solid #CCC;
-  border-radius: 10px;
-}
-
-.ball {
-  position: absolute;
-  top   : 90px;
-  left  : 90px;
-  width : 20px;
-  height: 20px;
-  background: green;
-  border-radius: 100%;
-}
-
- -

デバイスを動かすと、その動きに応じてボールが移動します:

- -
var ball   = document.querySelector('.ball');
-var garden = document.querySelector('.garden');
-var output = document.querySelector('.output');
-
-var maxX = garden.clientWidth  - ball.clientWidth;
-var maxY = garden.clientHeight - ball.clientHeight;
-
-function handleOrientation(event) {
-  var x = event.beta;  // -180 から 180 の範囲で角度を示す
-  var y = event.gamma; // -90 から 90 の範囲で角度を示す
-
-  output.innerHTML  = "beta : " + x + "\n";
-  output.innerHTML += "gamma: " + y + "\n";
-
-  // デバイスをひっくり返したくはないため、
-  // x の値を -90 から 90 の範囲に制限する
-  if (x >  90) { x =  90};
-  if (x < -90) { x = -90};
-
-  // 計算を容易にするため、x および y の値の範囲を
-  // 0 から 180 に変換する
-  x += 90;
-  y += 90;
-
-  // 10 は、ボールのサイズの半分である。
-  // これにより、配置場所をボールの中心に合わせる
-  ball.style.top  = (maxX*x/180 - 10) + "px";
-  ball.style.left = (maxY*y/180 - 10) + "px";
-}
-
-window.addEventListener('deviceorientation', handleOrientation);
-
- -

結果を以下に示します:

- -
{{EmbedLiveSample('Orientation_example', '230', '260')}}
- -
-

警告: Chrome と Firefox では角度の扱い方が異なり、一部の軸の向きが逆になっています。

-
- -

motion イベントを処理する

- -

motion イベントは orientation イベントと同じ方法で扱えますが、イベント名は {{event("devicemotion")}} になります。

- -
window.addEventListener("devicemotion", handleMotion, true);
- -

実際どのように変化したかの情報は、HandleMotion 関数のパラメータとして渡す {{domxref("DeviceMotionEvent")}} オブジェクトが提供します。

- -

motion イベントは 4 つのプロパティを持ちます:

- - - -

動きとして示される値

- -

{{domxref("DeviceMotionEvent")}} オブジェクトは Web 開発者に、デバイスの位置や方向が変化した速度の情報を提供します。変化量は 3 つの軸 (詳しくは方向および動きとして示されるデータをご覧ください) に沿って表します。

- -

{{domxref("DeviceMotionEvent.acceleration","acceleration")}} および {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}} で対応する軸は以下のとおりです:

- - - -

{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}} では状況が若干異なります。こちらの情報はそれぞれ以下のように対応します:

- - - -

最後に {{domxref("DeviceMotionEvent.interval","interval")}} は、デバイスからデータを取得する間隔をミリ秒単位で表します。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}最初の仕様
- -

ブラウザ実装状況

- -

DeviceMotionEvent

- -

{{Compat("api.DeviceMotionEvent")}}

- -

DeviceOrientationEvent

- -

{{Compat("api.DeviceOrientationEvent")}}

- -

関連情報

- - - - diff --git a/files/ja/web/events/detecting_device_orientation/index.md b/files/ja/web/events/detecting_device_orientation/index.md new file mode 100644 index 0000000000..8b3ba1f82f --- /dev/null +++ b/files/ja/web/events/detecting_device_orientation/index.md @@ -0,0 +1,234 @@ +--- +title: デバイスの方向の検出 +slug: Web/Events/Detecting_device_orientation +tags: + - API + - Device Orientation + - Firefox OS + - Intermediate + - Mobile + - Motion + - Orientation + - Reference + - WebAPI +translation_of: Web/Events/Detecting_device_orientation +original_slug: Web/Events/Detecting_device_orientation +--- +
{{SeeCompatTable}}
+ +

Web を利用可能なデバイスは、自身の方向を特定できるようになってきました。つまりデバイスは、重力との関係による自身の向きの変化を示すデータを報告できます。特に携帯電話のようなハンドヘルドデバイスは、表示内容が直立し続けるよう自動的に回転させるためにこの情報を使用でき、画面の幅が高さより大きくなるようにデバイスを回転させたときは、Web コンテンツをワイドスクリーン表示にします。

+ +

方向の情報を制御する JavaScript イベントが 2 つあります。ひとつは {{domxref("DeviceOrientationEvent")}} であり、加速度センサーがデバイスの方向の変化を検出したときに発生します。Orientation イベントが報告するデータを受け取って処理することで、ユーザがデバイスを動かすことによる方向や高さの変化に対してインタラクティブに応答できるようになります。

+ +

もうひとつのイベントは {{domxref("DeviceMotionEvent")}} であり、加速度が変化したときに発生します。こちらは方向ではなく加速度の変化を監視することが、{{domxref("DeviceOrientationEvent")}} との違いです。一般的に {{domxref("DeviceMotionEvent")}} を検出できるセンサーには、可動部があるストレージ装置を保護するためラップトップパソコンに内蔵するものも含みます。{{domxref("DeviceOrientationEvent")}} は、モバイルデバイスでとても一般的です。

+ +

orientation イベントを処理する

+ +

方向の変化を受け取り始めるには、{{event("deviceorientation")}} イベントをリッスンします:

+ +
+

注記

+

parallax は、モバイルデバイスの加速度センサーやジャイロスコープのデータを正規化するためのポリフィルです。これは、デバイスの方向のサポート状況の違いを克服するのに役立ちます。

+
+ +
window.addEventListener("deviceorientation", handleOrientation, true);
+
+ +

イベントリスナ (この例では handleOrientation() という名前の JavaScript 関数) を登録すると、リスナ関数は最新の方向データとともに、周期的に呼び出されます。

+ +

Orientation イベントは 4 つの値を持ちます:

+ + + +

イベントハンドラ関数は以下のようなものです:

+ +
function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // 新たな方向データに基づいて処理を行う
+}
+
+ +

方向として示される値

+ +

それぞれの軸で報告される値は、標準座標系の軸を中心にした回転量を表します。これらは方向および動きとして示されるデータの記事で詳しく説明しており、ここでは概要を記載します。

+ + + +

例

+ +

このサンプルは方向を検出可能なデバイス上で、{{event("deviceorientation")}} イベントをサポートするブラウザを実行する場合に動作します。

+ +

庭にボールがあると考えます:

+ +
<div class="garden">
+  <div class="ball"></div>
+</div>
+
+<pre class="output"></pre>
+
+ +

庭の幅は 200 ピクセルであり (小さな庭です)、ボールは中心にあります:

+ +
.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+
+ +

デバイスを動かすと、その動きに応じてボールが移動します:

+ +
var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // -180 から 180 の範囲で角度を示す
+  var y = event.gamma; // -90 から 90 の範囲で角度を示す
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // デバイスをひっくり返したくはないため、
+  // x の値を -90 から 90 の範囲に制限する
+  if (x >  90) { x =  90};
+  if (x < -90) { x = -90};
+
+  // 計算を容易にするため、x および y の値の範囲を
+  // 0 から 180 に変換する
+  x += 90;
+  y += 90;
+
+  // 10 は、ボールのサイズの半分である。
+  // これにより、配置場所をボールの中心に合わせる
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+
+ +

結果を以下に示します:

+ +
{{EmbedLiveSample('Orientation_example', '230', '260')}}
+ +
+

警告: Chrome と Firefox では角度の扱い方が異なり、一部の軸の向きが逆になっています。

+
+ +

motion イベントを処理する

+ +

motion イベントは orientation イベントと同じ方法で扱えますが、イベント名は {{event("devicemotion")}} になります。

+ +
window.addEventListener("devicemotion", handleMotion, true);
+ +

実際どのように変化したかの情報は、HandleMotion 関数のパラメータとして渡す {{domxref("DeviceMotionEvent")}} オブジェクトが提供します。

+ +

motion イベントは 4 つのプロパティを持ちます:

+ + + +

動きとして示される値

+ +

{{domxref("DeviceMotionEvent")}} オブジェクトは Web 開発者に、デバイスの位置や方向が変化した速度の情報を提供します。変化量は 3 つの軸 (詳しくは方向および動きとして示されるデータをご覧ください) に沿って表します。

+ +

{{domxref("DeviceMotionEvent.acceleration","acceleration")}} および {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}} で対応する軸は以下のとおりです:

+ + + +

{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}} では状況が若干異なります。こちらの情報はそれぞれ以下のように対応します:

+ + + +

最後に {{domxref("DeviceMotionEvent.interval","interval")}} は、デバイスからデータを取得する間隔をミリ秒単位で表します。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}最初の仕様
+ +

ブラウザ実装状況

+ +

DeviceMotionEvent

+ +

{{Compat("api.DeviceMotionEvent")}}

+ +

DeviceOrientationEvent

+ +

{{Compat("api.DeviceOrientationEvent")}}

+ +

関連情報

+ + + + diff --git a/files/ja/web/events/event_handlers/index.html b/files/ja/web/events/event_handlers/index.html deleted file mode 100644 index fadfa4d34f..0000000000 --- a/files/ja/web/events/event_handlers/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: イベントの扱い (概要) -slug: Web/Events/Event_handlers -tags: - - Beginner - - DOM - - DOM Beginner -translation_of: Web/Events/Event_handlers ---- - -

イベントとは、ブラウザーや OS の環境の変化を知らせる信号で、ブラウザーのウィンドウ内で発行されます。プログラマーは、イベントが発行されたときに実行されるイベントハンドラーのコードを作成することで、ウェブページが変化に適切に対応できるようになります。

- -

このページでは、イベントとイベントハンドラーの扱い方について、ごく簡単な「覚え書き」を提供しています。初めての方は、イベント入門をお読みください。

- - -

イベントでは何ができるのか

- -

イベントは、そのイベントを発行させる JavaScript オブジェクトのページの中や下に記述されています。例えば、ブラウザーのウィンドウや現在の文書で発生したイベントを確認するには、 Window や Document のイベントの節を参照してください。

- -

イベントのリファレンスを使用すると、アニメーションやメディアなどの特定の API に対してどの JavaScript オブジェクトがイベントを発行するかを調べることができます。

- -

イベントハンドラーの登録

- -

ハンドラーの登録には、推奨される方法が 2 つあります。イベントハンドラーのコードは、ターゲットとなる要素の対応する onevent プロパティに割り当てて、イベントが起動されたときに実行されるようにするか、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用して、ハンドラーを要素のリスナーとして登録するかすることができます。いずれの場合も、ハンドラーは Event インターフェイス (または派生インターフェイス) に準拠したオブジェクトを受け取ります。主な違いは、イベントリスナーのメソッドを使うと、複数のイベントハンドラーを追加 (または削除) できることです。

- -
-

警告

-

第 3 の方法として、 HTML の onevent 属性を使ってイベントハンドラーを設定する方法がありますが、お勧めしません。これはマークアップを膨張させ、可読性を低下させ、デバッグを困難にします。詳しくは、インラインイベントハンドラーを参照してください。

-
- -

onevent プロパティの使用

- -

慣習上、イベントを発行する Javascript オブジェクトには、それに対応する "onevent" プロパティ (イベント名の前に "on" を付けて命名) があります。これらのプロパティは、イベントが発行されたときに、関連するハンドラーコードを実行するために呼び出されます。

- -

イベントハンドラーのコードを設定するには、適切な onevent プロパティに代入してください。 1 つの要素のそれぞれのイベントに対して、割り当てることができるイベントハンドラーは 1 つだけです。必要に応じて、同じプロパティに別の関数を代入することで、ハンドラーを置き換えることができます。

- -

以下の例では、 greet() 関数を click イベントに割り当てるために onclick プロパティを使用しています。

- -
const btn = document.querySelector('button');
-
-function greet(event){
-  // print the event object to console
-  console.log('greet:', arguments)
-  }
-
-  btn.onclick = greet;
-
- -

なお、イベントハンドラーの第一引数には、イベントを表すオブジェクトが渡されます。このイベントオブジェクトは、 {{domxref("Event")}} インターフェースを実装しているか、またはそれを継承しています。

- -

EventTarget.addEventListener

- -

要素にイベントハンドラーを設定する最も柔軟な方法は、 {{domxref("EventTarget.addEventListener")}} メソッドを使用することです。この方法では、複数のリスナーを 1 つの要素に割り当てることができ、必要に応じて ({{domxref("EventTarget.removeEventListener")}} を使用して) リスナーを削除することができます。

- -
-

メモ

-

イベントハンドラーの追加と削除ができることで、例えば、同じボタンで状況によって異なるアクションを実行することができます。また、より複雑なプログラムでは、古い、使われていないイベントハンドラーを整理することで、効率を上げることができます。

-
- -

以下では、単純な greet() 関数をクリックイベントのリスナーまたはイベントハンドラーとして設定する方法を示します (必要に応じて、名前付き関数の代わりにラムダ関数を使用することもできます)。繰り返しますが、イベントは、イベントハンドラーの第一引数として渡されます。

- -
const btn = document.querySelector('button');
-
-function greet(event){
-  // print the event object to console
-  console.log('greet:', arguments)
-}
-
-btn.addEventListener('click', greet);
- -

このメソッドは、イベントのキャプチャおよび削除の制御をするために、追加の引数/オプションを取ることもできます。詳細については、 {{domxref("EventTarget.addEventListener")}} のリファレンスページを参照してください。

- -

中止シグナルの使用

- -

イベントリスナーの注目すべき機能は、中止シグナルを使って複数のイベントハンドラーを同時にクリーンアップできることです。

- -

これは、同じ {{domxref("AbortSignal")}} を、一緒に削除できるようにしたいすべてのイベントハンドラーの {{domxref("EventTarget/addEventListener()", "addEventListener()")}} 呼び出しに渡すことで行われます。その後、 AbortSignal を所有するコントローラーで {{domxref("AbortController/abort()", "abort()")}} を呼び出すと、そのシグナルで追加されたすべてのイベントハンドラーが削除されます。例えば、 AbortSignal で削除できるイベントハンドラーを追加するには、次のようにします。

- -
const controller = new AbortController();
-
-btn.addEventListener('click', function(event) {
-  // イベントオブジェクトをコンソールに表示
-  console.log('greet:', arguments)
-  }, { signal: controller.signal }); // このハンドラーに AbortSignal を渡す
- -

上記のコードで生成したイベントハンドラーは、次のようにして削除することができます。

- -
controller.abort(); // このコントローラーに関連付けられたすべてのイベントハンドラーを削除
- - - diff --git a/files/ja/web/events/event_handlers/index.md b/files/ja/web/events/event_handlers/index.md new file mode 100644 index 0000000000..fadfa4d34f --- /dev/null +++ b/files/ja/web/events/event_handlers/index.md @@ -0,0 +1,96 @@ +--- +title: イベントの扱い (概要) +slug: Web/Events/Event_handlers +tags: + - Beginner + - DOM + - DOM Beginner +translation_of: Web/Events/Event_handlers +--- + +

イベントとは、ブラウザーや OS の環境の変化を知らせる信号で、ブラウザーのウィンドウ内で発行されます。プログラマーは、イベントが発行されたときに実行されるイベントハンドラーのコードを作成することで、ウェブページが変化に適切に対応できるようになります。

+ +

このページでは、イベントとイベントハンドラーの扱い方について、ごく簡単な「覚え書き」を提供しています。初めての方は、イベント入門をお読みください。

+ + +

イベントでは何ができるのか

+ +

イベントは、そのイベントを発行させる JavaScript オブジェクトのページの中や下に記述されています。例えば、ブラウザーのウィンドウや現在の文書で発生したイベントを確認するには、 Window や Document のイベントの節を参照してください。

+ +

イベントのリファレンスを使用すると、アニメーションやメディアなどの特定の API に対してどの JavaScript オブジェクトがイベントを発行するかを調べることができます。

+ +

イベントハンドラーの登録

+ +

ハンドラーの登録には、推奨される方法が 2 つあります。イベントハンドラーのコードは、ターゲットとなる要素の対応する onevent プロパティに割り当てて、イベントが起動されたときに実行されるようにするか、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用して、ハンドラーを要素のリスナーとして登録するかすることができます。いずれの場合も、ハンドラーは Event インターフェイス (または派生インターフェイス) に準拠したオブジェクトを受け取ります。主な違いは、イベントリスナーのメソッドを使うと、複数のイベントハンドラーを追加 (または削除) できることです。

+ +
+

警告

+

第 3 の方法として、 HTML の onevent 属性を使ってイベントハンドラーを設定する方法がありますが、お勧めしません。これはマークアップを膨張させ、可読性を低下させ、デバッグを困難にします。詳しくは、インラインイベントハンドラーを参照してください。

+
+ +

onevent プロパティの使用

+ +

慣習上、イベントを発行する Javascript オブジェクトには、それに対応する "onevent" プロパティ (イベント名の前に "on" を付けて命名) があります。これらのプロパティは、イベントが発行されたときに、関連するハンドラーコードを実行するために呼び出されます。

+ +

イベントハンドラーのコードを設定するには、適切な onevent プロパティに代入してください。 1 つの要素のそれぞれのイベントに対して、割り当てることができるイベントハンドラーは 1 つだけです。必要に応じて、同じプロパティに別の関数を代入することで、ハンドラーを置き換えることができます。

+ +

以下の例では、 greet() 関数を click イベントに割り当てるために onclick プロパティを使用しています。

+ +
const btn = document.querySelector('button');
+
+function greet(event){
+  // print the event object to console
+  console.log('greet:', arguments)
+  }
+
+  btn.onclick = greet;
+
+ +

なお、イベントハンドラーの第一引数には、イベントを表すオブジェクトが渡されます。このイベントオブジェクトは、 {{domxref("Event")}} インターフェースを実装しているか、またはそれを継承しています。

+ +

EventTarget.addEventListener

+ +

要素にイベントハンドラーを設定する最も柔軟な方法は、 {{domxref("EventTarget.addEventListener")}} メソッドを使用することです。この方法では、複数のリスナーを 1 つの要素に割り当てることができ、必要に応じて ({{domxref("EventTarget.removeEventListener")}} を使用して) リスナーを削除することができます。

+ +
+

メモ

+

イベントハンドラーの追加と削除ができることで、例えば、同じボタンで状況によって異なるアクションを実行することができます。また、より複雑なプログラムでは、古い、使われていないイベントハンドラーを整理することで、効率を上げることができます。

+
+ +

以下では、単純な greet() 関数をクリックイベントのリスナーまたはイベントハンドラーとして設定する方法を示します (必要に応じて、名前付き関数の代わりにラムダ関数を使用することもできます)。繰り返しますが、イベントは、イベントハンドラーの第一引数として渡されます。

+ +
const btn = document.querySelector('button');
+
+function greet(event){
+  // print the event object to console
+  console.log('greet:', arguments)
+}
+
+btn.addEventListener('click', greet);
+ +

このメソッドは、イベントのキャプチャおよび削除の制御をするために、追加の引数/オプションを取ることもできます。詳細については、 {{domxref("EventTarget.addEventListener")}} のリファレンスページを参照してください。

+ +

中止シグナルの使用

+ +

イベントリスナーの注目すべき機能は、中止シグナルを使って複数のイベントハンドラーを同時にクリーンアップできることです。

+ +

これは、同じ {{domxref("AbortSignal")}} を、一緒に削除できるようにしたいすべてのイベントハンドラーの {{domxref("EventTarget/addEventListener()", "addEventListener()")}} 呼び出しに渡すことで行われます。その後、 AbortSignal を所有するコントローラーで {{domxref("AbortController/abort()", "abort()")}} を呼び出すと、そのシグナルで追加されたすべてのイベントハンドラーが削除されます。例えば、 AbortSignal で削除できるイベントハンドラーを追加するには、次のようにします。

+ +
const controller = new AbortController();
+
+btn.addEventListener('click', function(event) {
+  // イベントオブジェクトをコンソールに表示
+  console.log('greet:', arguments)
+  }, { signal: controller.signal }); // このハンドラーに AbortSignal を渡す
+ +

上記のコードで生成したイベントハンドラーは、次のようにして削除することができます。

+ +
controller.abort(); // このコントローラーに関連付けられたすべてのイベントハンドラーを削除
+ + + diff --git a/files/ja/web/events/index.html b/files/ja/web/events/index.html deleted file mode 100644 index 9fd97e2291..0000000000 --- a/files/ja/web/events/index.html +++ /dev/null @@ -1,1081 +0,0 @@ ---- -title: イベントリファレンス -slug: Web/Events -tags: - - Event - - Overview - - Reference -translation_of: Web/Events ---- -

イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化 (バッテリー残量の低下や OS のメディアイベントなど)、その他の原因によって発行されます。

- -

それぞれのイベントは、 {{domxref("Event")}} インターフェイスに基づいたオブジェクトで表現され、何が起こったかについての情報を提供するために、追加のカスタムフィールドや関数を持つことがあります。各イベントのドキュメントには、関連するイベントインターフェイスへのリンクや、その他の関連情報を含む表が (上部付近に) あります。イベントの種類の一覧は、イベント > Event を基にしたインターフェイスにあります。

- -

この記事では、興味のありそうな主なイベントの種類 (アニメーション、クリップボード、ワーカーなど) と、それらの種類のイベントを実装する主なクラスの索引を提供します。最後には、ドキュメント化されたすべてのイベントの一覧を掲載しています。

- -
-

備考

-

このページでは、ウェブ上で遭遇する最も一般的なイベントの多くをリストアップしています。ここに掲載されていないイベントを探している場合は、 MDN の他の部分でその名前、トピック領域、関連する仕様書を検索してみてください。

-
- -

イベント索引

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
イベントの種類説明ドキュメント
アニメーション -

Web Animation API に関するイベント。

-

アニメーション状態の変化 (例えば、アニメーションの開始または終了) に応答するために使用される。

- 		アニメーションイベントは Document, Window, HTMLElement で発行される。
非同期データ読み取り -

データの読み取りに関するイベント。

- 		イベントは AbortSignal, XMLHttpRequest, FileReader で発行される。
クリップボード -

Clipboard API に関するイベント。

-

コンテンツが切り取り、コピー、貼り付けされたときを知るために使用。

- 		イベントは Document, Element, Window で発行される。 -
変換 -

変換、すなわち (通常のキー押下を使用しない) テキストの「間接的な」入力に関するイベント。

-

例えば、音声入力エンジンからのテキスト入力、他の言語の新しい文字を表現するための特殊な装飾キー入力の組み合わせ。

-

訳注: 日本語のかな漢字変換も含む。

- 		イベントは Element で発行される。 -
CSS トランジション -

CSS トランジションに関するイベント。

-

CSS トランジションの開始、終了、キャンセルなどの時の通知イベントを提供する。

- 		イベントは Document, HTMLElement, Window で発行される。
データベース -

データベース操作時、開く、閉じる、トランザクション、エラーなどに関するイベント。

- 		イベントは IDBDatabase, IDBOpenDBRequest, IDBRequest, IDBTransaction で発行される。
DOM 変化 -

Document Object Model (DOM) 階層やノードに対する変更に関するイベント。

- 		-
-

備考

-

Mutation イベントは非推奨です。代わりに Mutation Observers を使用してください。

-
-
ドラッグ＆ドロップ、ホイール -

HTML Drag and Drop API に関するイベントやホイールイベント。

-

ドラッグイベントやホイールイベントは、マウスイベントから派生したものです。これらのイベントは、マウスホイールやドラッグ/ドロップを使用したときに発生しますが、他の適切なハードウェアでも使用されることがあります。

- 		-

ドラッグイベントは Document で発行される。

-

ホイールイベントは Document および Element で発行される。

-
フォーカス -

要素がフォーカスを得たり失ったりすることに関するイベント。

- 		イベントは Element, Window で発行される。 -
フォーム -

フォームが構築されたり、リセットされたり、送信されたりすることに関するイベント。

- 		イベントは HTMLFormElement で発行される。 -
全画面 -

Fullscreen API に関するイベント。

-

全画面モードとウィンドウモードの間で遷移したとき、この遷移の間でエラーが発生したときの通知に使用。

- 		イベントは Document, Element で発行される。
ゲームパッド -

Gamepad API に関するイベント。

- 		イベントは Window で発行される。 -
ジェスチャー -

ジェスチャーの実装にはタッチイベントが推奨されます。

- 		-

イベントは Document, Element で発行される。

-

加えて、いくつもの標準外のジェスチャーイベントが存在する。

- -
履歴 -

History API に関するイベント。

- 		イベントは Window で発行される。 -
HTML 要素コンテンツの表示管理 -

表示またはテキスト要素の状態の変更に関するイベント。

- 		イベントは HTMLDetailsElement, HTMLDialogElement, HTMLSlotElement で発行される。 -
入力 -

HTML の input 要素、例えば {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} に関するイベント。

- 		イベントは HTMLElement, HTMLInputElement で発行される。
キーボード -

キーボードの使用に関するイベント。

-

キーが上がった、下がった、押された時の通知に使用する。

- 		イベントは Document, Element で発行される。 -
文書の読み込み/アンロード -

文書の読み込みやアンロードに関するイベント。

- 		-

イベントは Document や Window で発行される。

-
マニフェスト -

プログレッシブウェブアプリのマニフェストのインストールに関するイベント。

- 		イベントは Window で発行される。
メディア -

メディアの使用 (Media Capture and Streams API, Web Audio API, Picture-in-Picture API, など) に関するイベント。

- 		イベントは ScriptProcessorNode, HTMLMediaElement, AudioTrackList, AudioScheduledSourceNode, MediaRecorder, MediaStream, MediaStreamTrack, VideoTrackList, HTMLTrackElement, OfflineAudioContext, TextTrack, TextTrackList, Element/audio, Element/video で発行される。 -
メッセージ -

ウィンドウが他の閲覧コンテキストからメッセージを受け取ることに関するイベント。

- 		イベントは Window で発行される。
マウス -

コンピューターのマウスの使用に関するイベント。

-

マウスのクリック、ダブルクリック、離す、押すイベント、右クリック、要素内または要素外への移動、テキスト選択など。

-

ポインターイベントは、ハードウェアに依存しない、マウスイベントの代替となるものです。ドラッグイベント、ホイールイベントは、マウスイベントから派生したものです。

- 		マウスイベントは Element で発行されます。
ネットワーク/接続 -

ネットワーク接続が得られた、または失われたことに関するイベント。

- 		-

イベントは Window で発行される。

-

イベントは NetworkInformation (Network Information API) で発行される。

-
支払い -

Payment Request API に関するイベント。

- 		-

イベントは PaymentRequest, PaymentResponse で発行される。

-
パフォーマンス -

High Resolution Time API, Performance Timeline API, Navigation Timing API, User Timing API, and Resource Timing API に関するイベント。

- 		-

イベントは Performance で発行される。

-
ポインター -

Pointer Events API に関するイベント。

-

マウス、タッチ、ペン/スタイラスなどのポインティングデバイスから、ハードウェアに依存しない通知を提供する。

- 		イベントは Document, HTMLElement で発行される。
印刷 -

印刷に関するイベント。

- 		イベントは Window で発行される。
プロミスの拒否 -

JavaScript のプロミスが拒否されたときにグローバルスクリプトコンテキストに送信されるイベント。

- 		イベントは Window で発行される。
ソケット -

WebSockets API に関するイベント。

- 		イベントは Websocket で発行される。
SVG -

SVG 画像に関するイベント。

- 		-

イベントは SVGElement, SVGAnimationElement, SVGGraphicsElement で発行される。

-
テキスト選択 -

テキストの選択に関するイベント。

- 		-

イベントは Document で発行

-
タッチ -

Touch Events API に関するイベント。

-

タッチ反応画面 (すなわち指またはスタイラスを使用したもの) の操作による通知イベントを提供する。 Force Touch API に関するものではない。

- 		イベントは Document, Element で発行される。
バーチャルリアリティ -

WebXR Device API に関するイベント。

-
-

WebVR API (および関連する Window イベント) は非推奨です。

-
- 		イベントは XRSystem, XRSession, XRReferenceSpace で発行される。
RTC (リアルタイムコミュニケーション) -

WebRTC API に関するイベント。

- 		イベントは RTCDataChannel, RTCDTMFSender, RTCIceTransport, RTCPeerConnection で発行される。
サーバー送信イベント -

server sent events API に関するイベント。

- 		イベントは EventSource で発行される。 -
発声 -

Web Speech API に関するイベント。

- 		イベントは SpeechSynthesisUtterance で発行される。
ワーカー -

Web Workers API, Service Worker API, Broadcast Channel API, Channel Messaging API に関するイベント。

-

新しいメッセージやメッセージ送信エラーに応答するために使用されます。サービスワーカーは、プッシュ通知、表示された通知をユーザーがクリックしたこと、プッシュ購読が無効になったこと、コンテンツインデックスからアイテムが削除されたことなど、その他のイベントを通知することもできます。

- 		イベントは ServiceWorkerGlobalScope, DedicatedWorkerGlobalScope, SharedWorkerGlobalScope, WorkerGlobalScope, Worker, WorkerGlobalScope, BroadcastChannel, MessagePort で発行されます。 -
- - -

イベントの一覧

- -

この節では、 MDN に独自のリファレンスページを持つイベントをリストアップしています。ここに掲載されていないイベントに興味がある場合は、 MDN の他の部分でその名前、トピック領域、または関連する仕様書を検索してみてください。

- -
-
{{DOMxRef("AbortSignal")}}
-
- -
-
{{DOMxRef("AudioScheduledSourceNode")}}
-
- -
-
{{DOMxRef("AudioTrackList")}}
-
- -
-
{{DOMxRef("BroadcastChannel")}}
-
- -
-
{{DOMxRef("DedicatedWorkerGlobalScope")}}
-
- -
-
{{DOMxRef("Document")}}
-
- -
-
{{DOMxRef("Element")}}
-
- -
-
{{DOMxRef("EventSource")}}
-
- -
-
{{DOMxRef("FileReader")}}
-
- -
-
{{DOMxRef("HTMLCanvasElement")}}
-
- -
-
{{DOMxRef("HTMLDetailsElement")}}
-
- -
-
{{DOMxRef("HTMLDialogElement")}}
-
- -
-
{{DOMxRef("HTMLElement")}}
-
- -
-
{{DOMxRef("HTMLFormElement")}}
-
- -
-
{{DOMxRef("HTMLInputElement")}}
-
- -
-
{{DOMxRef("HTMLMediaElement")}}
-
- -
-
{{DOMxRef("HTMLSlotElement")}}
-
- -
-
{{DOMxRef("HTMLTrackElement")}}
-
- -
-
{{DOMxRef("HTMLVideoElement")}}
-
- -
-
{{DOMxRef("IDBDatabase")}}
-
- -
-
{{DOMxRef("IDBOpenDBRequest")}}
-
- -
-
{{DOMxRef("IDBRequest")}}
-
- -
-
{{DOMxRef("IDBTransaction")}}
-
- -
-
{{DOMxRef("MediaDevices")}}
-
- -
-
{{DOMxRef("MediaRecorder")}}
-
- -
-
{{DOMxRef("MediaStream")}}
-
- -
-
{{DOMxRef("MediaStreamTrack")}}
-
- -
-
{{DOMxRef("MessagePort")}}
-
- -
-
{{DOMxRef("OfflineAudioContext")}}
-
- -
-
{{DOMxRef("PaymentRequest")}}
-
- -
-
{{DOMxRef("PaymentResponse")}}
-
- -
-
{{DOMxRef("Performance")}}
-
- -
-
{{DOMxRef("PictureInPictureWindow")}}
-
- -
-
{{DOMxRef("RTCDataChannel")}}
-
- -
-
{{DOMxRef("RTCDtlsTransport")}}
-
- -
-
{{DOMxRef("RTCDTMFSender")}}
-
- -
-
{{DOMxRef("RTCIceTransport")}}
-
- -
-
{{DOMxRef("RTCPeerConnection")}}
-
- -
-
{{DOMxRef("ScriptProcessorNode")}}
-
- -
-
{{DOMxRef("ServiceWorkerContainer")}}
-
- -
-
{{DOMxRef("ServiceWorkerGlobalScope")}}
-
- -
-
{{DOMxRef("SharedWorkerGlobalScope")}}
-
- -
-
{{DOMxRef("SpeechRecognition")}}
-
- -
-
{{DOMxRef("SpeechSynthesis")}}
-
- -
-
{{DOMxRef("SpeechSynthesisUtterance")}}
-
- -
-
{{DOMxRef("SVGAnimationElement")}}
-
- -
-
{{DOMxRef("SVGElement")}}
-
- -
-
{{DOMxRef("SVGGraphicsElement")}}
-
- -
-
{{DOMxRef("TextTrack")}}
-
- -
-
{{DOMxRef("TextTrackList")}}
-
- -
-
{{DOMxRef("VideoTrackList")}}
-
- -
-
{{DOMxRef("VisualViewport")}}
-
- -
-
{{DOMxRef("WebSocket")}}
-
- -
-
{{DOMxRef("Window")}}
-
- -
-
{{DOMxRef("Worker")}}
-
- -
-
{{DOMxRef("WorkerGlobalScope")}}
-
- -
-
{{DOMxRef("XMLHttpRequest")}}
-
- -
-
{{DOMxRef("XRReferenceSpace")}}
-
- -
-
{{DOMxRef("XRSession")}}
-
- -
-
{{DOMxRef("XRSystem")}}
-
- -
-
- - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
- - diff --git a/files/ja/web/events/index.md b/files/ja/web/events/index.md new file mode 100644 index 0000000000..9fd97e2291 --- /dev/null +++ b/files/ja/web/events/index.md @@ -0,0 +1,1081 @@ +--- +title: イベントリファレンス +slug: Web/Events +tags: + - Event + - Overview + - Reference +translation_of: Web/Events +--- +

イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化 (バッテリー残量の低下や OS のメディアイベントなど)、その他の原因によって発行されます。

+ +

それぞれのイベントは、 {{domxref("Event")}} インターフェイスに基づいたオブジェクトで表現され、何が起こったかについての情報を提供するために、追加のカスタムフィールドや関数を持つことがあります。各イベントのドキュメントには、関連するイベントインターフェイスへのリンクや、その他の関連情報を含む表が (上部付近に) あります。イベントの種類の一覧は、イベント > Event を基にしたインターフェイスにあります。

+ +

この記事では、興味のありそうな主なイベントの種類 (アニメーション、クリップボード、ワーカーなど) と、それらの種類のイベントを実装する主なクラスの索引を提供します。最後には、ドキュメント化されたすべてのイベントの一覧を掲載しています。

+ +
+

備考

+

このページでは、ウェブ上で遭遇する最も一般的なイベントの多くをリストアップしています。ここに掲載されていないイベントを探している場合は、 MDN の他の部分でその名前、トピック領域、関連する仕様書を検索してみてください。

+
+ +

イベント索引

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
イベントの種類説明ドキュメント
アニメーション +

Web Animation API に関するイベント。

+

アニメーション状態の変化 (例えば、アニメーションの開始または終了) に応答するために使用される。

+ 		アニメーションイベントは Document, Window, HTMLElement で発行される。
非同期データ読み取り +

データの読み取りに関するイベント。

+ 		イベントは AbortSignal, XMLHttpRequest, FileReader で発行される。
クリップボード +

Clipboard API に関するイベント。

+

コンテンツが切り取り、コピー、貼り付けされたときを知るために使用。

+ 		イベントは Document, Element, Window で発行される。 +
変換 +

変換、すなわち (通常のキー押下を使用しない) テキストの「間接的な」入力に関するイベント。

+

例えば、音声入力エンジンからのテキスト入力、他の言語の新しい文字を表現するための特殊な装飾キー入力の組み合わせ。

+

訳注: 日本語のかな漢字変換も含む。

+ 		イベントは Element で発行される。 +
CSS トランジション +

CSS トランジションに関するイベント。

+

CSS トランジションの開始、終了、キャンセルなどの時の通知イベントを提供する。

+ 		イベントは Document, HTMLElement, Window で発行される。
データベース +

データベース操作時、開く、閉じる、トランザクション、エラーなどに関するイベント。

+ 		イベントは IDBDatabase, IDBOpenDBRequest, IDBRequest, IDBTransaction で発行される。
DOM 変化 +

Document Object Model (DOM) 階層やノードに対する変更に関するイベント。

+ 		+
+

備考

+

Mutation イベントは非推奨です。代わりに Mutation Observers を使用してください。

+
+
ドラッグ＆ドロップ、ホイール +

HTML Drag and Drop API に関するイベントやホイールイベント。

+

ドラッグイベントやホイールイベントは、マウスイベントから派生したものです。これらのイベントは、マウスホイールやドラッグ/ドロップを使用したときに発生しますが、他の適切なハードウェアでも使用されることがあります。

+ 		+

ドラッグイベントは Document で発行される。

+

ホイールイベントは Document および Element で発行される。

+
フォーカス +

要素がフォーカスを得たり失ったりすることに関するイベント。

+ 		イベントは Element, Window で発行される。 +
フォーム +

フォームが構築されたり、リセットされたり、送信されたりすることに関するイベント。

+ 		イベントは HTMLFormElement で発行される。 +
全画面 +

Fullscreen API に関するイベント。

+

全画面モードとウィンドウモードの間で遷移したとき、この遷移の間でエラーが発生したときの通知に使用。

+ 		イベントは Document, Element で発行される。
ゲームパッド +

Gamepad API に関するイベント。

+ 		イベントは Window で発行される。 +
ジェスチャー +

ジェスチャーの実装にはタッチイベントが推奨されます。

+ 		+

イベントは Document, Element で発行される。

+

加えて、いくつもの標準外のジェスチャーイベントが存在する。

+ +
履歴 +

History API に関するイベント。

+ 		イベントは Window で発行される。 +
HTML 要素コンテンツの表示管理 +

表示またはテキスト要素の状態の変更に関するイベント。

+ 		イベントは HTMLDetailsElement, HTMLDialogElement, HTMLSlotElement で発行される。 +
入力 +

HTML の input 要素、例えば {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} に関するイベント。

+ 		イベントは HTMLElement, HTMLInputElement で発行される。
キーボード +

キーボードの使用に関するイベント。

+

キーが上がった、下がった、押された時の通知に使用する。

+ 		イベントは Document, Element で発行される。 +
文書の読み込み/アンロード +

文書の読み込みやアンロードに関するイベント。

+ 		+

イベントは Document や Window で発行される。

+
マニフェスト +

プログレッシブウェブアプリのマニフェストのインストールに関するイベント。

+ 		イベントは Window で発行される。
メディア +

メディアの使用 (Media Capture and Streams API, Web Audio API, Picture-in-Picture API, など) に関するイベント。

+ 		イベントは ScriptProcessorNode, HTMLMediaElement, AudioTrackList, AudioScheduledSourceNode, MediaRecorder, MediaStream, MediaStreamTrack, VideoTrackList, HTMLTrackElement, OfflineAudioContext, TextTrack, TextTrackList, Element/audio, Element/video で発行される。 +
メッセージ +

ウィンドウが他の閲覧コンテキストからメッセージを受け取ることに関するイベント。

+ 		イベントは Window で発行される。
マウス +

コンピューターのマウスの使用に関するイベント。

+

マウスのクリック、ダブルクリック、離す、押すイベント、右クリック、要素内または要素外への移動、テキスト選択など。

+

ポインターイベントは、ハードウェアに依存しない、マウスイベントの代替となるものです。ドラッグイベント、ホイールイベントは、マウスイベントから派生したものです。

+ 		マウスイベントは Element で発行されます。
ネットワーク/接続 +

ネットワーク接続が得られた、または失われたことに関するイベント。

+ 		+

イベントは Window で発行される。

+

イベントは NetworkInformation (Network Information API) で発行される。

+
支払い +

Payment Request API に関するイベント。

+ 		+

イベントは PaymentRequest, PaymentResponse で発行される。

+
パフォーマンス +

High Resolution Time API, Performance Timeline API, Navigation Timing API, User Timing API, and Resource Timing API に関するイベント。

+ 		+

イベントは Performance で発行される。

+
ポインター +

Pointer Events API に関するイベント。

+

マウス、タッチ、ペン/スタイラスなどのポインティングデバイスから、ハードウェアに依存しない通知を提供する。

+ 		イベントは Document, HTMLElement で発行される。
印刷 +

印刷に関するイベント。

+ 		イベントは Window で発行される。
プロミスの拒否 +

JavaScript のプロミスが拒否されたときにグローバルスクリプトコンテキストに送信されるイベント。

+ 		イベントは Window で発行される。
ソケット +

WebSockets API に関するイベント。

+ 		イベントは Websocket で発行される。
SVG +

SVG 画像に関するイベント。

+ 		+

イベントは SVGElement, SVGAnimationElement, SVGGraphicsElement で発行される。

+
テキスト選択 +

テキストの選択に関するイベント。

+ 		+

イベントは Document で発行

+
タッチ +

Touch Events API に関するイベント。

+

タッチ反応画面 (すなわち指またはスタイラスを使用したもの) の操作による通知イベントを提供する。 Force Touch API に関するものではない。

+ 		イベントは Document, Element で発行される。
バーチャルリアリティ +

WebXR Device API に関するイベント。

+
+

WebVR API (および関連する Window イベント) は非推奨です。

+
+ 		イベントは XRSystem, XRSession, XRReferenceSpace で発行される。
RTC (リアルタイムコミュニケーション) +

WebRTC API に関するイベント。

+ 		イベントは RTCDataChannel, RTCDTMFSender, RTCIceTransport, RTCPeerConnection で発行される。
サーバー送信イベント +

server sent events API に関するイベント。

+ 		イベントは EventSource で発行される。 +
発声 +

Web Speech API に関するイベント。

+ 		イベントは SpeechSynthesisUtterance で発行される。
ワーカー +

Web Workers API, Service Worker API, Broadcast Channel API, Channel Messaging API に関するイベント。

+

新しいメッセージやメッセージ送信エラーに応答するために使用されます。サービスワーカーは、プッシュ通知、表示された通知をユーザーがクリックしたこと、プッシュ購読が無効になったこと、コンテンツインデックスからアイテムが削除されたことなど、その他のイベントを通知することもできます。

+ 		イベントは ServiceWorkerGlobalScope, DedicatedWorkerGlobalScope, SharedWorkerGlobalScope, WorkerGlobalScope, Worker, WorkerGlobalScope, BroadcastChannel, MessagePort で発行されます。 +
+ + +

イベントの一覧

+ +

この節では、 MDN に独自のリファレンスページを持つイベントをリストアップしています。ここに掲載されていないイベントに興味がある場合は、 MDN の他の部分でその名前、トピック領域、または関連する仕様書を検索してみてください。

+ +
+
{{DOMxRef("AbortSignal")}}
+
+ +
+
{{DOMxRef("AudioScheduledSourceNode")}}
+
+ +
+
{{DOMxRef("AudioTrackList")}}
+
+ +
+
{{DOMxRef("BroadcastChannel")}}
+
+ +
+
{{DOMxRef("DedicatedWorkerGlobalScope")}}
+
+ +
+
{{DOMxRef("Document")}}
+
+ +
+
{{DOMxRef("Element")}}
+
+ +
+
{{DOMxRef("EventSource")}}
+
+ +
+
{{DOMxRef("FileReader")}}
+
+ +
+
{{DOMxRef("HTMLCanvasElement")}}
+
+ +
+
{{DOMxRef("HTMLDetailsElement")}}
+
+ +
+
{{DOMxRef("HTMLDialogElement")}}
+
+ +
+
{{DOMxRef("HTMLElement")}}
+
+ +
+
{{DOMxRef("HTMLFormElement")}}
+
+ +
+
{{DOMxRef("HTMLInputElement")}}
+
+ +
+
{{DOMxRef("HTMLMediaElement")}}
+
+ +
+
{{DOMxRef("HTMLSlotElement")}}
+
+ +
+
{{DOMxRef("HTMLTrackElement")}}
+
+ +
+
{{DOMxRef("HTMLVideoElement")}}
+
+ +
+
{{DOMxRef("IDBDatabase")}}
+
+ +
+
{{DOMxRef("IDBOpenDBRequest")}}
+
+ +
+
{{DOMxRef("IDBRequest")}}
+
+ +
+
{{DOMxRef("IDBTransaction")}}
+
+ +
+
{{DOMxRef("MediaDevices")}}
+
+ +
+
{{DOMxRef("MediaRecorder")}}
+
+ +
+
{{DOMxRef("MediaStream")}}
+
+ +
+
{{DOMxRef("MediaStreamTrack")}}
+
+ +
+
{{DOMxRef("MessagePort")}}
+
+ +
+
{{DOMxRef("OfflineAudioContext")}}
+
+ +
+
{{DOMxRef("PaymentRequest")}}
+
+ +
+
{{DOMxRef("PaymentResponse")}}
+
+ +
+
{{DOMxRef("Performance")}}
+
+ +
+
{{DOMxRef("PictureInPictureWindow")}}
+
+ +
+
{{DOMxRef("RTCDataChannel")}}
+
+ +
+
{{DOMxRef("RTCDtlsTransport")}}
+
+ +
+
{{DOMxRef("RTCDTMFSender")}}
+
+ +
+
{{DOMxRef("RTCIceTransport")}}
+
+ +
+
{{DOMxRef("RTCPeerConnection")}}
+
+ +
+
{{DOMxRef("ScriptProcessorNode")}}
+
+ +
+
{{DOMxRef("ServiceWorkerContainer")}}
+
+ +
+
{{DOMxRef("ServiceWorkerGlobalScope")}}
+
+ +
+
{{DOMxRef("SharedWorkerGlobalScope")}}
+
+ +
+
{{DOMxRef("SpeechRecognition")}}
+
+ +
+
{{DOMxRef("SpeechSynthesis")}}
+
+ +
+
{{DOMxRef("SpeechSynthesisUtterance")}}
+
+ +
+
{{DOMxRef("SVGAnimationElement")}}
+
+ +
+
{{DOMxRef("SVGElement")}}
+
+ +
+
{{DOMxRef("SVGGraphicsElement")}}
+
+ +
+
{{DOMxRef("TextTrack")}}
+
+ +
+
{{DOMxRef("TextTrackList")}}
+
+ +
+
{{DOMxRef("VideoTrackList")}}
+
+ +
+
{{DOMxRef("VisualViewport")}}
+
+ +
+
{{DOMxRef("WebSocket")}}
+
+ +
+
{{DOMxRef("Window")}}
+
+ +
+
{{DOMxRef("Worker")}}
+
+ +
+
{{DOMxRef("WorkerGlobalScope")}}
+
+ +
+
{{DOMxRef("XMLHttpRequest")}}
+
+ +
+
{{DOMxRef("XRReferenceSpace")}}
+
+ +
+
{{DOMxRef("XRSession")}}
+
+ +
+
{{DOMxRef("XRSystem")}}
+
+ +
+
+ + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
+ + diff --git a/files/ja/web/events/orientation_and_motion_data_explained/index.html b/files/ja/web/events/orientation_and_motion_data_explained/index.html deleted file mode 100644 index 535ae1ae53..0000000000 --- a/files/ja/web/events/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 方向および動きとして示されるデータ -slug: Web/Events/Orientation_and_motion_data_explained -tags: - - Intermediate - - Mobile - - Motion - - NeedsContent - - Orientation - - rotation -translation_of: Web/Events/Orientation_and_motion_data_explained -original_slug: Web/Guide/Events/Orientation_and_motion_data_explained ---- -

{{ Draft() }}

- -

概要

- -

方向や動きのイベントを使用するときは、ブラウザーから与えられる値の意味を理解することが重要です。この記事では操作時の座標システムに関する詳細情報と、それらの使い方を説明します。

- -

座標フレームについて

- -

座標フレーム (coordinate frame) は、オブジェクトに関する 3 軸 (X, Y, Z) の方向が定義されているシステムです。方向や動きのイベントを使用するときに考慮する座標フレームは 2 つあります。

- -

地球座標フレーム

- -

地球座標フレーム (Earth coordinate frame) は、地球の中心に固定されている座標フレームです。すなわち、軸は重力によって引かれる力および標準的な磁北方向に基づいて揃えられます。私たちは大文字 ("X"、"Y"、"Z") を、地球座標フレームの軸を示すために使用します。

- - -

端末座標フレーム

- -

端末座標フレーム (Device coordinate frame) は、端末の中心に固定された座標フレームです。私たちは小文字 ("x"、"y"、"z") を、端末座標フレームの軸を示すために使用します。

- -

- - - -
注:携帯電話やタブレットでは、端末の方向が常に画面の標準的な方向に対して考慮され、これは、ほとんどの端末では「ポートレート」 (縦) の方向になります。ノートパソコンでは、方向はキーボードに対して考慮されます。補正するために端末の方向の変化を検知したい場合は、orientationchange イベントが使用できます。
- -

回転について

- -

回転は、端末座標フレームと地球座標フレームとの度合いの違いという点から各軸で表現され、またそれは度単位で測られます。

- -

Alpha

- -

z 軸を中心にした回転、すなわち端末をひねるようにすると、 alpha 回転角が変化します。

- -

- -

alpha 角は端末の上端が地球の北極をまっすぐ向いているときが 0 度であり、端末が左へ回転するのに従って増加します。

- -

Beta

- -

x 軸を中心にした回転、すなわち端末を向こう側やユーザー側へ向けて傾けると、 beta 回転角が変化します。

- -

Positive beta pitches the device forward toward the user.

- -

beta 角は端末の上端および下端から地球の表面までの距離がどちらも同じであるときが 0 度であり、端末を前方へ傾けるに従って 180 度まで増加、後方へ傾けるに従って -180 度まで減少します。

- -

Gamma

- -

y 軸を中心にした回転、すなわち端末を左右に傾けると、 gamma 回転角が変化します。

- -

- -

gamma 角は端末の左端および右端から地球の表面までの距離がどちらも同じであるときが 0 度であり、端末を右へ傾けるのに従って 90 度まで増加、左へ傾けるのに従って -90 度まで減少します。

- - diff --git a/files/ja/web/events/orientation_and_motion_data_explained/index.md b/files/ja/web/events/orientation_and_motion_data_explained/index.md new file mode 100644 index 0000000000..535ae1ae53 --- /dev/null +++ b/files/ja/web/events/orientation_and_motion_data_explained/index.md @@ -0,0 +1,83 @@ +--- +title: 方向および動きとして示されるデータ +slug: Web/Events/Orientation_and_motion_data_explained +tags: + - Intermediate + - Mobile + - Motion + - NeedsContent + - Orientation + - rotation +translation_of: Web/Events/Orientation_and_motion_data_explained +original_slug: Web/Guide/Events/Orientation_and_motion_data_explained +--- +

{{ Draft() }}

+ +

概要

+ +

方向や動きのイベントを使用するときは、ブラウザーから与えられる値の意味を理解することが重要です。この記事では操作時の座標システムに関する詳細情報と、それらの使い方を説明します。

+ +

座標フレームについて

+ +

座標フレーム (coordinate frame) は、オブジェクトに関する 3 軸 (X, Y, Z) の方向が定義されているシステムです。方向や動きのイベントを使用するときに考慮する座標フレームは 2 つあります。

+ +

地球座標フレーム

+ +

地球座標フレーム (Earth coordinate frame) は、地球の中心に固定されている座標フレームです。すなわち、軸は重力によって引かれる力および標準的な磁北方向に基づいて揃えられます。私たちは大文字 ("X"、"Y"、"Z") を、地球座標フレームの軸を示すために使用します。

+ + +

端末座標フレーム

+ +

端末座標フレーム (Device coordinate frame) は、端末の中心に固定された座標フレームです。私たちは小文字 ("x"、"y"、"z") を、端末座標フレームの軸を示すために使用します。

+ +

+ + + +
注:携帯電話やタブレットでは、端末の方向が常に画面の標準的な方向に対して考慮され、これは、ほとんどの端末では「ポートレート」 (縦) の方向になります。ノートパソコンでは、方向はキーボードに対して考慮されます。補正するために端末の方向の変化を検知したい場合は、orientationchange イベントが使用できます。
+ +

回転について

+ +

回転は、端末座標フレームと地球座標フレームとの度合いの違いという点から各軸で表現され、またそれは度単位で測られます。

+ +

Alpha

+ +

z 軸を中心にした回転、すなわち端末をひねるようにすると、 alpha 回転角が変化します。

+ +

+ +

alpha 角は端末の上端が地球の北極をまっすぐ向いているときが 0 度であり、端末が左へ回転するのに従って増加します。

+ +

Beta

+ +

x 軸を中心にした回転、すなわち端末を向こう側やユーザー側へ向けて傾けると、 beta 回転角が変化します。

+ +

Positive beta pitches the device forward toward the user.

+ +

beta 角は端末の上端および下端から地球の表面までの距離がどちらも同じであるときが 0 度であり、端末を前方へ傾けるに従って 180 度まで増加、後方へ傾けるに従って -180 度まで減少します。

+ +

Gamma

+ +

y 軸を中心にした回転、すなわち端末を左右に傾けると、 gamma 回転角が変化します。

+ +

+ +

gamma 角は端末の左端および右端から地球の表面までの距離がどちらも同じであるときが 0 度であり、端末を右へ傾けるのに従って 90 度まで増加、左へ傾けるのに従って -90 度まで減少します。

+ + -- cgit v1.2.3-54-g00ecf