diff options
| author | MDN <actions@users.noreply.github.com> | 2021-04-21 00:11:44 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2021-04-21 00:11:44 +0000 |
| commit | de630426a538c1f77d7c59e66827cb75693ed95b (patch) | |
| tree | ff14c2d2677ed2137a84d3c322fa2f62e206e63a /files/ja/web/api/document_object_model | |
| parent | d7a27823444dc11c7ff40ca63a78b3b37ab82837 (diff) | |
| download | translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.gz translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.bz2 translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/ja/web/api/document_object_model')
| -rw-r--r-- | files/ja/web/api/document_object_model/events/index.html | 88 |
1 files changed, 0 insertions, 88 deletions
diff --git a/files/ja/web/api/document_object_model/events/index.html b/files/ja/web/api/document_object_model/events/index.html deleted file mode 100644 index 1d8b1974a6..0000000000 --- a/files/ja/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: イベントと DOM -slug: Web/API/Document_Object_Model/Events -tags: - - DOM - - Guide - - ガイド -translation_of: Web/API/Document_Object_Model/Events ---- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<h2 id="Introduction" name="Introduction">はじめに</h2> - -<p>この章では DOM のイベントモデルを説明します。この <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> インターフェイス自身は、 DOM のノード上にイベントを登録する為のインターフェイスと同様であり、<a href="/ja/docs/Web/API/EventTarget/addEventListener">イベントリスナー</a>であるとも言えます。いくつかの長い例は、様々な Event インターフェイスがどのように他と関連するかを示します。</p> - -<p><a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM レベル 3 イベントの原案</a>に、DOM を通して 3 つのフェーズから構成されるイベントフローを明確に説明した素晴らしい説明図があります。</p> - -<p>また、イベントが DOM 内をどのように伝播するかについては更に詳細なコード例、<a href="/ja/docs/DOM/DOM_Reference/Examples#Example_5.3A_Event_Propagation">例 5: イベント伝播 (propagation)</a> を参照してください。</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">イベントリスナーの登録</h2> - -<p>DOM の要素にイベントハンドラーを登録する方法は 3 つあります。</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> - -<pre class="brush: js notranslate">// 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') -} -</pre> - -<p>これが最近のウェブページで使われる方法です。</p> - -<div class="blockIndicator note"> -<p><strong>注:</strong> Internet Explorer 6 から 8 はこの方法をサポートせず、 {{domxref("EventTarget.attachEvent")}} という似た API を代わりにサポートします。ブラウザー間の互換性を確保するには、数多くある JavaScript ライブラリのうちの一つを使用してください。</p> -</div> - -<p>さらに詳細を知りたい場合は {{domxref("EventTarget.addEventListener")}} のリファレンスを参照してください。</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/ja/docs/Web/Guide/HTML/Event_attributes">HTML 属性</a></h3> - -<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> -</pre> - -<p>HTML 属性に書かれたこの JavaScript コードには、 <code>event</code> 引数を通してイベントオブジェクトが渡されます。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">返値は HTML の仕様で定義された特別な方法で処理されます</a>。</p> - -<div class="blockIndicator warning"> -<p><strong>警告:</strong> この方法は避けてください。これはマークアップを増加させ、可読性を下げます。コンテンツと振る舞いが正しく分離されておらず、バグの発見が困難になります。</p> -</div> - -<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 要素のプロパティ</h3> - -<pre class="brush: js notranslate">// myButton は button 要素と仮定します -myButton.onclick = function(event){alert('Hello world')} -</pre> - -<p>この関数は 1 つの <code>event</code> 引数を取るように定義できます。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">返り値は HTML の仕様で定義された特別な方法で処理されます</a>。</p> - -<p>この書き方の問題は、各要素の各イベント毎に 1 つだけしかハンドラーを設定できないことです。</p> - -<h2 id="Accessing_Event_interfaces" name="Accessing_Event_interfaces">Event インターフェイスへのアクセス</h2> - -<p>イベントハンドラーは (DOM 要素や文書、 {{domxref("window")}} オブジェクト等を含めた) 様々なオブジェクトに追加されるでしょう。イベントが発生すると、イベントオブジェクトが生成され順番にイベントリスナーが呼ばれます。</p> - -<p>{{domxref("Event")}} インターフェイスは、イベントハンドラーの内部からアクセス可能で、第 1 引数としてイベントオブジェクトを介して渡されます。以下のシンプルな例は、イベントハンドラーにどのようにイベントオブジェクトが渡され、その中でどのように使われるかを示します。</p> - -<pre class="brush: js notranslate">function print(evt) { - // evt 引数は自動的にイベントオブジェクトに割り当てられます - // console.log と alert の違いに注意してください - console.log('print:', evt) - alert(evt) -} -// どの関数も意味を持つ適切な名前を付けてください -table_el.onclick = print -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Document_Object_Model">DOM リファレンス</a></li> - <li><a href="/ja/docs/Web/API/Document_Object_Model/Introduction">DOM への導入</a></li> - <li><a href="/ja/docs/Web/API/Document_Object_Model/Events">イベントと DOM</a></li> - <li><a href="/ja/docs/Web/API/Document_Object_Model/Examples">例</a></li> -</ul> |
