From 28377f692739345c99df9107ac21b9c75fe8f33b Mon Sep 17 00:00:00 2001 From: hagiwara takayuki <141513+hagiwaratakayuki@users.noreply.github.com> Date: Sat, 29 May 2021 22:12:57 +0900 Subject: 英語版で復旧したweb/events下のファイル復旧(一部) (#957) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html files/ja/orphaned/web/api/detecting_device_orientation/index.html files/ja/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html Co-authored-by: hagiwaratakayuli Co-authored-by: Masahiro FUJIMOTO --- .../creating_and_triggering_events/index.html | 142 --------------------- 1 file changed, 142 deletions(-) delete mode 100644 files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html (limited to 'files/ja/orphaned/web/guide/events') diff --git a/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 9d2760dce6..0000000000 --- a/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: イベントの作成と起動 -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - JavaScript - - NeedsContent - - events -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -

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

- -

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

- -

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

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

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

- -

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

- -

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

- -

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

- -

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

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

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

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

古い方法

- -

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

- -
// イベントの作成
-var 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() {
-  var event = new MouseEvent('click', {
-    view: window,
-    bubbles: true,
-    cancelable: true
-  });
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-  if (cancelled) {
-    // A handler called preventDefault.
-    alert("cancelled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not cancelled");
-  }
-}
- -

関連情報

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