From de630426a538c1f77d7c59e66827cb75693ed95b Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 21 Apr 2021 00:11:44 +0000 Subject: [CRON] sync translated content --- .../api/document_object_model/events/index.html | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/ja/orphaned/web/api/document_object_model/events/index.html (limited to 'files/ja/orphaned/web/api/document_object_model') diff --git a/files/ja/orphaned/web/api/document_object_model/events/index.html b/files/ja/orphaned/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..7443168f11 --- /dev/null +++ b/files/ja/orphaned/web/api/document_object_model/events/index.html @@ -0,0 +1,89 @@ +--- +title: イベントと DOM +slug: orphaned/Web/API/Document_Object_Model/Events +tags: + - DOM + - Guide + - ガイド +translation_of: Web/API/Document_Object_Model/Events +original_slug: Web/API/Document_Object_Model/Events +--- +
{{DefaultAPISidebar("DOM")}}
+ +

はじめに

+ +

この章では DOM のイベントモデルを説明します。この Event インターフェイス自身は、 DOM のノード上にイベントを登録する為のインターフェイスと同様であり、イベントリスナーであるとも言えます。いくつかの長い例は、様々な Event インターフェイスがどのように他と関連するかを示します。

+ +

DOM レベル 3 イベントの原案に、DOM を通して 3 つのフェーズから構成されるイベントフローを明確に説明した素晴らしい説明図があります。

+ +

また、イベントが DOM 内をどのように伝播するかについては更に詳細なコード例、例 5: イベント伝播 (propagation) を参照してください。

+ +

イベントリスナーの登録

+ +

DOM の要素にイベントハンドラーを登録する方法は 3 つあります。

+ +

{{domxref("EventTarget.addEventListener")}}

+ +
// myButton は button 要素だと仮定します
+myButton.addEventListener('click', greet, false);
+function greet(event){
+    // print and have a look at the event object
+    // always print arguments in case of overlooking any other arguments
+    console.log('greet:', arguments)
+    alert('hello world')
+}
+
+ +

これが最近のウェブページで使われる方法です。

+ +
+

注: Internet Explorer 6 から 8 はこの方法をサポートせず、 {{domxref("EventTarget.attachEvent")}} という似た API を代わりにサポートします。ブラウザー間の互換性を確保するには、数多くある JavaScript ライブラリのうちの一つを使用してください。

+
+ +

さらに詳細を知りたい場合は {{domxref("EventTarget.addEventListener")}} のリファレンスを参照してください。

+ +

HTML 属性

+ +
<button onclick="alert('Hello world!')">
+
+ +

HTML 属性に書かれたこの JavaScript コードには、 event 引数を通してイベントオブジェクトが渡されます。返値は HTML の仕様で定義された特別な方法で処理されます。

+ +
+

警告: この方法は避けてください。これはマークアップを増加させ、可読性を下げます。コンテンツと振る舞いが正しく分離されておらず、バグの発見が困難になります。

+
+ +

DOM 要素のプロパティ

+ +
// myButton は button 要素と仮定します
+myButton.onclick = function(event){alert('Hello world')}
+
+ +

この関数は 1 つの event 引数を取るように定義できます。返り値は HTML の仕様で定義された特別な方法で処理されます。

+ +

この書き方の問題は、各要素の各イベント毎に 1 つだけしかハンドラーを設定できないことです。

+ +

Event インターフェイスへのアクセス

+ +

イベントハンドラーは (DOM 要素や文書、 {{domxref("window")}} オブジェクト等を含めた) 様々なオブジェクトに追加されるでしょう。イベントが発生すると、イベントオブジェクトが生成され順番にイベントリスナーが呼ばれます。

+ +

{{domxref("Event")}} インターフェイスは、イベントハンドラーの内部からアクセス可能で、第 1 引数としてイベントオブジェクトを介して渡されます。以下のシンプルな例は、イベントハンドラーにどのようにイベントオブジェクトが渡され、その中でどのように使われるかを示します。

+ +
function print(evt) {
+  // evt 引数は自動的にイベントオブジェクトに割り当てられます
+  // console.log と alert の違いに注意してください
+  console.log('print:', evt)
+  alert(evt)
+}
+// どの関数も意味を持つ適切な名前を付けてください
+table_el.onclick = print
+
+ + + + -- cgit v1.2.3-54-g00ecf