[CRON] sync translated content

6 files changed, 729 insertions, 0 deletions

diff --git a/files/ja/orphaned/web/api/detecting_device_orientation/index.html b/files/ja/orphaned/web/api/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..484067e66f
--- /dev/null
+++ b/files/ja/orphaned/web/api/detecting_device_orientation/index.html
@@ -0,0 +1,229 @@
+---
+title: デバイスの方向の検出
+slug: orphaned/Web/API/Detecting_device_orientation
+tags:
+  - API
+  - Device Orientation
+  - Firefox OS
+  - Intermediate
+  - Mobile
+  - Motion
+  - Orientation
+  - Reference
+  - WebAPI
+translation_of: Web/API/Detecting_device_orientation
+original_slug: Web/API/Detecting_device_orientation
+---
+<div>{{SeeCompatTable}}</div>
+
+<p>Web を利用可能なデバイスは、自身の<strong>方向</strong>を特定できるようになってきました。つまりデバイスは、重力との関係による自身の向きの変化を示すデータを報告できます。特に携帯電話のようなハンドヘルドデバイスは、表示内容が直立し続けるよう自動的に回転させるためにこの情報を使用でき、画面の幅が高さより大きくなるようにデバイスを回転させたときは、Web コンテンツをワイドスクリーン表示にします。</p>
+
+<p>方向の情報を制御する JavaScript イベントが 2 つあります。ひとつは {{domxref("DeviceOrientationEvent")}} であり、加速度センサーがデバイスの方向の変化を検出したときに発生します。Orientation イベントが報告するデータを受け取って処理することで、ユーザがデバイスを動かすことによる方向や高さの変化に対してインタラクティブに応答できるようになります。</p>
+
+<p>もうひとつのイベントは {{domxref("DeviceMotionEvent")}} であり、加速度が変化したときに発生します。こちらは方向ではなく加速度の変化を監視することが、{{domxref("DeviceOrientationEvent")}} との違いです。一般的に {{domxref("DeviceMotionEvent")}} を検出できるセンサーには、可動部があるストレージ装置を保護するためラップトップパソコンに内蔵するものも含みます。{{domxref("DeviceOrientationEvent")}} は、モバイルデバイスでとても一般的です。</p>
+
+<h2 id="Processing_orientation_events" name="Processing_orientation_events">orientation イベントを処理する</h2>
+
+<p>方向の変化を受け取り始めるには、{{event("deviceorientation")}} イベントをリッスンします:</p>
+
+<div class="note">
+<p><strong>注記</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> は、モバイルデバイスの加速度センサーやジャイロスコープのデータを正規化するためのポリフィルです。これは、デバイスの方向のサポート状況の違いを克服するのに役立ちます。</p>
+</div>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
+</pre>
+
+<p>イベントリスナ (この例では handleOrientation() という名前の JavaScript 関数) を登録すると、リスナ関数は最新の方向データとともに、周期的に呼び出されます。</p>
+
+<p>Orientation イベントは 4 つの値を持ちます:</p>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent.absolute")}}</li>
+ <li>{{domxref("DeviceOrientationEvent.alpha")}}</li>
+ <li>{{domxref("DeviceOrientationEvent.beta")}}</li>
+ <li>{{domxref("DeviceOrientationEvent.gamma")}}</li>
+</ul>
+
+<p>イベントハンドラ関数は以下のようなものです:</p>
+
+<pre class="brush: js">function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // 新たな方向データに基づいて処理を行う
+}
+</pre>
+
+<h3 id="Orientation_values_explained" name="Orientation_values_explained">方向として示される値</h3>
+
+<p>それぞれの軸で報告される値は、標準座標系の軸を中心にした回転量を表します。これらは<a href="/ja/DOM/Orientation_and_motion_data_explained">方向および動きとして示されるデータ</a>の記事で詳しく説明しており、ここでは概要を記載します。</p>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent.alpha")}} の値は z 軸を中心にしたデバイスの動きを表し、0 から 360 の範囲による度数で表されます。</li>
+ <li>{{domxref("DeviceOrientationEvent.beta")}} の値は x 軸を中心にしたデバイスの動きを表し、-180 から 180 の範囲の値による度数で表されます。これはデバイスの前後の動きです。</li>
+ <li>{{domxref("DeviceOrientationEvent.gamma")}} の値は y 軸を中心にしたデバイスの動きを表し、-90 から 90 の範囲の値による度数で表されます。これはデバイスの左右の動きです。</li>
+</ul>
+
+<h3 id="Orientation_example" name="Orientation_example">例</h3>
+
+<p>このサンプルは方向を検出可能なデバイス上で、{{event("deviceorientation")}} イベントをサポートするブラウザを実行する場合に動作します。</p>
+
+<p>庭にボールがあると考えます:</p>
+
+<pre class="brush: html">&lt;div class="garden"&gt;
+  &lt;div class="ball"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;pre class="output"&gt;&lt;/pre&gt;
+</pre>
+
+<p>庭の幅は 200 ピクセルであり (小さな庭です)、ボールは中心にあります:</p>
+
+<pre class="brush: css">.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%;
+}
+</pre>
+
+<p>デバイスを動かすと、その動きに応じてボールが移動します:</p>
+
+<pre class="brush: js">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 &gt;  90) { x =  90};
+  if (x &lt; -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);
+</pre>
+
+<p>結果を以下に示します:</p>
+
+<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div>
+
+<div class="warning">
+<p><strong>警告:</strong> Chrome と Firefox では角度の扱い方が異なり、一部の軸の向きが逆になっています。</p>
+</div>
+
+<h2 id="Processing_motion_events" name="Processing_motion_events">motion イベントを処理する</h2>
+
+<p>motion イベントは orientation イベントと同じ方法で扱えますが、イベント名は {{event("devicemotion")}} になります。</p>
+
+<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>
+
+<p>実際どのように変化したかの情報は、<em>HandleMotion</em> 関数のパラメータとして渡す {{domxref("DeviceMotionEvent")}} オブジェクトが提供します。</p>
+
+<p>motion イベントは 4 つのプロパティを持ちます:</p>
+
+<ul>
+ <li>{{domxref("DeviceMotionEvent.acceleration")}}</li>
+ <li>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}}</li>
+ <li>{{domxref("DeviceMotionEvent.rotationRate")}}</li>
+ <li>{{domxref("DeviceMotionEvent.interval")}}</li>
+</ul>
+
+<h3 id="Motion_values_explained" name="Motion_values_explained">動きとして示される値</h3>
+
+<p>{{domxref("DeviceMotionEvent")}} オブジェクトは Web 開発者に、デバイスの位置や方向が変化した速度の情報を提供します。変化量は 3 つの軸 (詳しくは<a href="/ja/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">方向および動きとして示されるデータ</a>をご覧ください) に沿って表します。</p>
+
+<p>{{domxref("DeviceMotionEvent.acceleration","acceleration")}} および {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}} で対応する軸は以下のとおりです:</p>
+
+<ul>
+ <li><code>x</code>: 西から東へ向かう軸を表します。</li>
+ <li><code>y</code>: 南から北へ向かう軸を表します。</li>
+ <li><code>z</code>: 地面から直立する軸を表します。</li>
+</ul>
+
+<p>{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}} では状況が若干異なります。こちらの情報はそれぞれ以下のように対応します:</p>
+
+<ul>
+ <li><code>alpha</code>: スクリーン (デスクトップ環境ではキーボード) から直立する軸を表します。</li>
+ <li><code>beta</code>: スクリーンの面 (デスクトップ環境ではキーボード) の左から右へ向かう軸に沿った回転量を表します。</li>
+ <li><code>gamma</code>: スクリーンの面 (デスクトップ環境ではキーボード) の下から上へ向かう軸に沿った回転量を表します。</li>
+</ul>
+
+<p>最後に {{domxref("DeviceMotionEvent.interval","interval")}} は、デバイスからデータを取得する間隔をミリ秒単位で表します。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>最初の仕様</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<div>
+<h3 id="DeviceMotionEvent"><code>DeviceMotionEvent</code></h3>
+
+
+
+<p>{{Compat("api.DeviceMotionEvent")}}</p>
+
+<h3 id="DeviceOrientationEvent"><code>DeviceOrientationEvent</code></h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.DeviceOrientationEvent")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>レガシー化したイベントである <code><a href="/ja/docs/Web/Events/MozOrientation">MozOrientation</a></code></li>
+ <li><a href="/ja/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a></li>
+ <li><a href="/ja/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms">Using deviceorientation in 3D Transforms</a></li>
+ <li><a href="/ja/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb: 2D maze game with device orientation</a></li>
+</ul>
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
+---
+<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">&lt;button onclick="alert('Hello world!')"&gt;
+</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>
diff --git a/files/ja/orphaned/web/guide/events/event_handlers/index.html b/files/ja/orphaned/web/guide/events/event_handlers/index.html
new file mode 100644
index 0000000000..7cdd63d81e
--- /dev/null
+++ b/files/ja/orphaned/web/guide/events/event_handlers/index.html
@@ -0,0 +1,173 @@
+---
+title: DOM onevent ハンドラー
+slug: orphaned/Web/Guide/Events/Event_handlers
+tags:
+  - Beginner
+  - DOM
+  - DOM Beginner
+  - NeedsBeginnerUpdate
+  - NeedsUpdate
+translation_of: Web/Guide/Events/Event_handlers
+original_slug: Web/Guide/Events/Event_handlers
+---
+<p><span class="seoSummary">ウェブプラットフォームでは、<a href="/ja/docs/Web/Events">DOM イベント</a>の通知を受け取るための方法をいくつか提供しています。よく使われる方法は2つあり、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} と、特定の <code>on<em>event</em></code> ハンドラーです。</span>このページでは、後者がどのように機能するのかについて注目します。</p>
+
+<h2 id="Registering_onevent_handlers" name="Registering_onevent_handlers">onevent ハンドラーの登録</h2>
+
+<p><strong><code>on<em>event</em></code></strong> ハンドラーは特定の DOM 要素のプロパティで、その要素がイベントに対してどのように反応するかを管理します。要素には、対話的なもの (リンク、ボタン、画像、フォームなど) と対話的ではないもの (基本の <code>&lt;body&gt;</code> 要素など) があります。イベントとは、以下のようなアクションのことです。</p>
+
+<ul>
+ <li>クリックされた</li>
+ <li>キーの押下が検出された</li>
+ <li>フォーカスを受け取った</li>
+</ul>
+
+<p><code>on<em>event</em></code> ハンドラーは通常、<code>on<em>click</em></code>, <code>on<em>keypress</em></code>, <code>on<em>focus</em></code> など、反応するイベントに従って名前が付けられています。</p>
+
+<p><code>on<em>&lt;…&gt;</em></code> イベントハンドラーを指定することで、指定されたオブジェクトの特定のイベント ({{event("click")}} など) に対してさまざまな方法で指定することができます。</p>
+
+<ul>
+ <li>要素に <code>on<em>&lt;eventtype&gt;</em></code> という名前の HTML {{Glossary("attribute", "属性")}}を追加する方法。<br>
+  <code>&lt;button <strong>onclick="handleClick()"</strong>&gt;</code>,</li>
+ <li>または、JavaScript から対応する {{Glossary("property/JavaScript", "property")}} を設定する方法。<br>
+  <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li>
+</ul>
+
+<p><code>on<em>event</em></code> イベントハンドラープロパティは、1 つのイベントハンドラーを割り当てることができる一種のプレースホルダーとして機能します。与えられたオブジェクト上の同じイベントに対して複数のハンドラーをインストールできるようにするには、その addEventListener() メソッドを呼び出して、オブジェクト上の与えられたイベントに対するハンドラーのリストを管理することができます。ハンドラーは、その {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 関数を呼び出すことで、オブジェクトから削除することができます。</p>
+
+<p>要素に適用されるイベントが発生すると、そのイベントハンドラーが次々と呼び出され、イベントを処理できるようになります。自分で呼び出す必要はありませんが、多くの場合、イベントの発生を簡単にシミュレートするために呼び出すことができます。例えば、ボタンオブジェクト <code>myButton</code> を指定した場合、 <code>myButton.onclick(myEventObject)</code> を実行することでイベントハンドラーを直接呼び出すことができます。イベントハンドラーがイベントオブジェクトからデータにアクセスしない場合は、 <code>onclick()</code> を呼び出すときにイベントを省略することができます。</p>
+
+<p>これは、イベントハンドラーのいずれかがイベントオブジェクト自身に対して {{domxref("Event.stopPropagation", "stopPropagation()")}} を呼び出すことでイベントの処理を明示的に停止しない限り、すべてのハンドラーが呼び出されるまで続きます。</p>
+
+<h3 id="Non-element_objects" name="Non-element_objects">要素以外のオブジェクト</h3>
+
+<p>イベントハンドラーはまた、 {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }} などを含む、イベントを生成する多くの要素以外のオブジェクトのプロパティを使用して設定することもできます。例えば、 <code>progress</code> イベントが <code>XMLHttpRequest</code> のインスタンスで発生した場合は次のようになります。</p>
+
+<pre class="brush: js notranslate">const xhr = new XMLHttpRequest();
+xhr.onprogress = function() { … };</pre>
+
+<h2 id="HTML_onevent_attributes" name="HTML_onevent_attributes">HTML の onevent 属性</h2>
+
+<p>HTML 要素には <code>on<em>event</em></code> という名前の属性があり、これを利用して HTML コード内に直接イベントのハンドラーを登録することができます。要素が HTML から構築されると、その <code>on<em>event</em></code> 属性の値がその要素を表す DOM オブジェクトにコピーされるので、JavaScript を使って属性の値にアクセスすると、HTML で設定された値が得られます。</p>
+
+
+
+<p>HTML の属性値への更なる変更は {{domxref("Element/setAttribute", "setAttribute")}} メソッドで行うことができます。 JavaScript プロパティを変更しても効果あありません。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>このような HTML 文書があったとします。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Demonstrating quirks of &lt;code&gt;on&lt;em&gt;event&lt;/em&gt;&lt;/code&gt; HTML attributes on
+   &lt;a onclick="log('Click!')"&gt;these three words&lt;/a&gt;.
+&lt;/p&gt;
+
+&lt;div&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>この JavaScript は、 HTML 属性の値が JavaScript オブジェクトのプロパティの変更によって影響を受けないことを示しています。</p>
+
+<pre class="brush: js notranslate">let logElement = document.querySelector('div');
+let el = document.querySelector("a");
+
+function log(msg) { logElement.innerHTML += `${msg}&lt;br&gt;` };
+function anchorOnClick(event) { log("Changed onclick handler") };
+
+// Original Handler
+log(`Element's onclick as a JavaScript property: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+
+//Changing handler using .onclick
+log('&lt;br&gt;Changing onclick handler using &lt;strong&gt; onclick property &lt;/strong&gt; ');
+
+el.onclick = anchorOnClick;
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`But the HTML attribute is unchanged: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);
+
+//Changing handler using .setAttribute
+log('&lt;hr/&gt;&lt;br&gt; Changing onclick handler using &lt;strong&gt; setAttribute method &lt;/strong&gt; ');
+el.setAttribute("onclick", 'anchorOnClick(event)');
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`Now even the HTML attribute has changed: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p>
+
+<p>歴史的な理由から、{{HTMLElement("body")}} および {{HTMLElement("frameset")}} 要素の一部の属性/プロパティは、実際にはその親 {{domxref("Window")}} オブジェクトにイベントハンドラーを設定します。(HTML 仕様はこれらを {{domxref("GlobalEventHandlers/onblur", "onblur")}}, {{domxref("GlobalEventHandlers/onerror", "onerror")}}, {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}, {{domxref("GlobalEventHandlers/onload", "onload")}}, {{domxref("GlobalEventHandlers/onscroll", "onscroll")}} と命名しています。)</p>
+
+<h3 id="Event_handlers_parameters_this_binding_and_the_return_value" name="Event_handlers_parameters_this_binding_and_the_return_value">イベントハンドラーの引数、this の結びつけ、および返値</h3>
+
+<p>イベントハンドラーが <strong>HTML 属性</strong>として指定されている場合、指定されたコードは<strong>次の引数</strong>を持つ関数にラップされます。</p>
+
+<ul>
+ <li><code>event</code> - {domxref("GlobalEventHandlers.onerror", "onerror")}} を除くすべてのイベントハンドラー。</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code> - {{domxref("GlobalEventHandlers.onerror", "onerror")}} のイベントハンドラー。なお、 <code>event</code> 引数には、実際にはエラーメッセージが文字列として含まれています。</li>
+</ul>
+
+<p>イベントハンドラーが呼び出されると、ハンドラー内の <code>this</code> キーワードは、ハンドラーが登録されている DOM 要素に設定されます。詳しくは、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler"><code>this</code> キーワードのドキュメント</a>を参照してください。</p>
+
+<p>ハンドラーからの返値は、イベントが取り消されるかどうかを決定します。返値値の具体的な処理はイベントの種類によって異なります。詳細については、<a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">HTML 仕様の「イベントハンドラー処理アルゴリズム」</a>を参照してください。</p>
+
+<h3 id="When_the_event_handler_is_invoked" name="When_the_event_handler_is_invoked">イベントハンドラーが呼び出されたとき</h3>
+
+<div class="blockIndicator note">
+<p>作成中 (非捕獲リスナー)</p>
+</div>
+
+<h3 id="Terminology" name="Terminology">用語集</h3>
+
+<p><strong>イベントハンドラー</strong>という用語は、次のように使用されます。</p>
+
+<ul>
+ <li>イベントの通知を受けるように登録されている関数またはオブジェクト</li>
+ <li>または、より具体的には、<code>&lt;button onclick="alert(this)"&gt;</code> や <code>window.onload = function() { … }</code>など、HTML の <code>on…</code> 属性または Web API のプロパティを介してイベントリスナーを登録するメカニズム。</li>
+</ul>
+
+<p>イベントを待ち受けするためのさまざまな方法を議論するときは、</p>
+
+<ul>
+ <li><strong>イベントリスナー</strong>は、{{domxref("EventTarget.addEventListener()")}} によって登録された関数またはオブジェクトを参照します。</li>
+ <li>一方、<strong>イベントハンドラー</strong>は <code>on...</code> 属性またはプロパティを介して登録された関数を指します。</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの互換性</h2>
+
+<h4 id="イベントハンドラープロパティが存在することの検出">イベントハンドラープロパティが存在することの検出</h4>
+
+<p>JavaScript の {{jsxref("Operators/in", "in")}} 演算子でイベントハンドラープロパティの存在を検出することができます。例えば、以下のようになります。</p>
+
+<pre class="brush: js notranslate">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="Event_handlers_and_prototypes" name="Event_handlers_and_prototypes">イベントハンドラーとプロトタイプ</h4>
+
+<p>DOM プロトタイプオブジェクトには、IDL で定義された属性の値を設定したり、アクセスしたりすることはできません。つまり、例えば <code>Window.prototype.onload</code> を変更することはできません。以前は、 Gecko では イベントハンドラー (<code>onload</code> など) が IDL 属性として実装されていなかったので可能だったのですが、現在はできなくなりました。これにより互換性が向上します。</p>
diff --git a/files/ja/orphaned/web/guide/events/index.html b/files/ja/orphaned/web/guide/events/index.html
new file mode 100644
index 0000000000..35f1c1184b
--- /dev/null
+++ b/files/ja/orphaned/web/guide/events/index.html
@@ -0,0 +1,51 @@
+---
+title: イベント開発者ガイド
+slug: orphaned/Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - events
+translation_of: Web/Guide/Events
+original_slug: Web/Guide/Events
+---
+<div>{{draft()}}</div>
+
+<p>イベントは、ウェブページの生存期間に起こる様々な出来事を非同期に扱うために使用されるデザインパターンと、さまざまな種類の多数の出来事についての名前、特性付け、利用の両方を指します。</p>
+
+<p><a href="/ja/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">概要ページ</a>では、デザインパターンの紹介と最近のウェブブラウザーで定義され行われる出来事の種類の概要を提供します。</p>
+
+<p><a href="/ja/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">カスタムイベントページ</a>では、独自コードでイベントコードのデザインパターンを使用して、ユーザーオブジェクトによって発行される新しいイベント型を定義し、それらのイベントを処理するためのリスナー関数を登録し、ユーザーのコードでイベントを発生させる方法について説明します。</p>
+
+<p>その他のページでは、ウェブブラウザーで定義されているさまざまな種類のイベントの使用方法について説明します。残念なことに、これらのイベントはウェブブラウザーの進化に合わせて部分的に定義されてきたため、最新のウェブブラウザーに組み込まれている、または定義されているイベントの満足のいく体系的な特徴付けはありません。</p>
+
+<p>ウェブブラウザーが実行されている<strong>端末</strong>は、例えば実世界での場所や方向の変化によってイベントが発生することがあり、これは<a href="/ja/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">方向座標系上のページ</a>および<a href="/ja/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">三次元変換の使用上のページ</a>で部分的に説明されているとおりです。これは端末の縦の方向が変化した場合とは異なりますが、似ています。</p>
+
+<p>ブラウザーが表示される<strong>ウィンドウ</strong>がイベントを発生させることがあります。例えば、ユーザーがウィンドウを最大化したり、その他の変更があったりすると、サイズ変更イベントが発生します。</p>
+
+<p>ウェブページを読み込んでいる<strong>プロセス</strong>がユーザーに表示するためにウェブページをダウンロードし、解析し、レンダリングする様々な段階を補完するための応答としてイベントを発生することがあります。</p>
+
+<p>ウェブページのコンテンツへの<strong>ユーザーの操作</strong>がイベントを発生させることがあります。ユーザーの操作によって発生したイベントは、ブラウザー設計の初期の頃に進化し、イベントが呼び出される順序およびその順序を制御することができる方法を定義する複雑なシステムを含んでいます。さまざまな種類のユーザー対話型イベントには、以下のものがあります。</p>
+
+<ul>
+ <li>オリジナルの「クリック」イベント</li>
+ <li>マウスイベント</li>
+ <li><a href="/ja/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">マウスジェスチャーイベント</a>、および</li>
+ <li><a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">タッチイベント</a>や、非推奨になったそれ以前の<a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">Mozilla の実験的タッチイベント</a></li>
+</ul>
+
+<p>構造面やコンテンツにおける<strong>ウェブページの変更</strong>が、いくつかのイベントを発生させることがあり、<a href="/ja/docs/Web/Guide/API/DOM/Events/Mutation_events">変化イベントのページ</a>で説明されているとおりですが、これらのイベントはより軽い <a href="/ja/docs/Web/API/MutationObserver">Mutation Observer</a> のアプローチに置き換えられて非推奨になっています。</p>
+
+<p>HTML 文書に埋め込まれた<strong>メディアストリーム</strong>がいくつかのイベントを発生させることがあり、<a href="/ja/docs/Web/Guide/API/DOM/Events/Media_events">メディアイベント</a>ページで説明されている通りです。</p>
+
+<p>ウェブページによって行われる<strong>ネットワークリクエスト</strong>が、いくつかのイベントを発生させることがあります。</p>
+
+<p>他にも、ウェブブラウザーが定義したイベントの発生源で、このガイドではまだ言及していないものがたくさんあります。</p>
+
+<div class="note">
+<p>メモ: このイベント開発者ガイドは継続的な作業が必要です。構造を再編したりページを書き直したりする必要があります。イベントについて知っておくことが必要なすべてをここで提供できるようになりたいと考えています。</p>
+</div>
+
+<h2 id="Docs" name="Docs">文書</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ja/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/ja/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html
new file mode 100644
index 0000000000..637b1cc413
--- /dev/null
+++ b/files/ja/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html
@@ -0,0 +1,50 @@
+---
+title: 方向および動きとして示されるデータ
+slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained
+tags:
+  - DOM
+  - Mobile
+  - Motion
+  - NeedsContent
+  - Orientation
+  - Responsive Design
+  - páginas_a_traducir
+  - rotation
+translation_of: Web/Guide/Events/Orientation_and_motion_data_explained
+original_slug: Web/Guide/Events/Orientation_and_motion_data_explained
+---
+<p>{{ Draft() }}</p>
+<p>方向や動きのイベントを使用するときは、ブラウザから与えられる値の意味を理解することが重要です。この記事では操作時の座標システムに関する詳細情報と、それらの使い方を説明します。</p>
+<h2 id="About_coordinate_frames" name="About_coordinate_frames">座標フレームについて</h2>
+<p><strong>{{原語併記("座標フレーム", "coordinate frame")}}</strong> は、オブジェクトに関する 3 軸 (X、Y、Z) の方向が定義されているシステムです。方向や動きのイベントを使用するときに考慮する座標フレームは 2 つあります:</p>
+<h3 id="Earth_coordinate_frame" name="Earth_coordinate_frame">地球座標フレーム</h3>
+<p>{{原語併記("地球座標フレーム", "Earth coordinate frame")}} は、地球の中心に固定されている座標フレームです。すなわち、軸は重力によって引かれる力および標準的な磁北方向に基づいて揃えられます。私たちは大文字 ("X"、"Y"、"Z") を、地球座標フレームの軸を示すために使用します。</p>
+<ul>
+  <li><strong>X</strong> 軸は地面に沿ってたどり、Y 軸と直交します。また、軸の正の方向が東を指します (従って、負の方向は西を指します)。</li>
+  <li><strong>Y</strong> 軸は地面に沿ってたどり、正の方向が真北 (すなわち北極であり、磁北ではありません) を、負の方向が真南を指します。</li>
+  <li><strong>Z</strong> 軸は地面に直交します。これは、デバイスと地球の中心との間に引かれた線と考えてください。Z 座標の値は正の方向が上向き (地球の中心から遠ざかる)、負の方向が下向き (地球の中心に向かう) です。</li>
+</ul>
+<h3 id="Device_coordinate_frame" name="Device_coordinate_frame">デバイス座標フレーム</h3>
+<p>{{原語併記("デバイス座標フレーム", "Device coordinate frame")}} は、デバイスの中心に固定された座標フレームです。私たちは小文字 ("x"、"y"、"z") を、デバイス座標フレームの軸を示すために使用します。</p>
+<p><img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png" style=""></p>
+<ul>
+  <li><strong>x</strong> 軸はスクリーンの水平面にあり、正の方向が右を、負の方向が左を指します。</li>
+  <li><strong>y</strong> 軸はスクリーンの水平面にあり、正の方向が上端側を、負の方向が下端側を指します。</li>
+  <li><strong>z</strong> 軸はスクリーンやキーボードに直交しており、正の方向がスクリーンから外側へ伸びていきます。</li>
+</ul>
+<div class="note">
+  <strong>注意:</strong> 電話機やタブレットでは、デバイスの方向が常にスクリーンの標準的な方向に対して考えられます。これは、ほとんどのデバイスで "ポートレート" 方向になります。ラップトップコンピュータでは、方向はキーボードに対して考えられます。補正するためにデバイスの方向の変化を検知したい場合は、<code>orientationchange</code> イベントを使用できます。</div>
+<h2 id="About_rotation" name="About_rotation">回転について</h2>
+<p>回転は、デバイス座標フレームと地球座標フレームとの度合いの違いという点から各軸で表現され、またそれは度単位で測られます</p>
+<h3 id="Alpha">Alpha</h3>
+<p>z 軸を中心にした回転、すなわちデバイスをひねるようにすると、<strong>alpha</strong> 回転角が変化します:</p>
+<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png" style=""></p>
+<p>alpha 角はデバイスの上端が地球の北極をまっすぐ向いているときが 0 度であり、デバイスが左へ回転するのに従って増加します。</p>
+<h3 id="Beta">Beta</h3>
+<p>x 軸を中心にした回転、すなわちデバイスを向こう側やユーザ側へ向かって傾けると、<strong>beta</strong> 回転角が変化します:</p>
+<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p>
+<p>beta 角はデバイスの上端および下端から地球の表面までの距離がどちらも同じであるときが 0 度であり、デバイスを前方へ傾けるのに従って 180 度まで増加、後方へ傾けるのに従って -180 度まで減少します。</p>
+<h3 id="Gamma">Gamma</h3>
+<p>y 軸を中心にした回転、すなわちデバイスを左右に傾けると、<strong>gamma</strong> 回転角が変化します:</p>
+<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p>
+<p>gamma 角はデバイスの左端および右端から地球の表面までの距離がどちらも同じであるときが 0 度であり、デバイスを右へ傾けるのに従って 90 度まで増加、左へ傾けるのに従って -90 度まで減少します。</p>
diff --git a/files/ja/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/ja/orphaned/web/guide/events/overview_of_events_and_handlers/index.html
new file mode 100644
index 0000000000..4e30c38418
--- /dev/null
+++ b/files/ja/orphaned/web/guide/events/overview_of_events_and_handlers/index.html
@@ -0,0 +1,137 @@
+---
+title: Overview of Events and Handlers
+slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers
+translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
+original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers
+---
+<div class="summary">
+<p>This overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.</p>
+</div>
+
+<p>Events and event handling provide a core technique in JavaScript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page,  relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.</p>
+
+<p>Events and event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering. Initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the user. The displayed page remains unchanged until the browser requests a new page. With the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. Event triggers include the completion of the loading of a resource on the network <em>e.g.,</em> downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser <em>e.g.</em>, processes the HTML content of a page, the interaction of a user with the contents of the page <em>e.g.,</em> clicks a button. Douglas Crockford explains this change effectively in several lectures, notably his talk, <em>An Inconvenient API: The Theory of the DOM,</em> which shows the change in flow from the original browser flow</p>
+
+<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div>
+
+<p>to the event driven browser. The latter approach changes the last steps from a single flow into a perpetual loop, where waiting for and handling the incidence of new events follows painting. The innovation of the dynamic approach allows for a page to be partially rendered even when the browser has not finished retrieving all resources; this approach also allows for event driven actions, which JavaScript leverages. (The talk is available from several sources, including <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">this one</a>.) Currently, all execution environments for JavaScript code use events and event handling.</p>
+
+<h2 id="The_event_design_pattern">The event design pattern</h2>
+
+<p>The event system, at its core, is simply a programming design pattern. The pattern starts with an agreement over a kind of event and:</p>
+
+<ul>
+ <li>the name String used for the event,</li>
+ <li>the type of the data structure used to represent the key properties of that event, and</li>
+ <li>the JavaScript object which will 'emit' that event.</li>
+</ul>
+
+<p>The pattern is implemented by</p>
+
+<ul>
+ <li>defining a JavaScript function which takes as an argument the data structure which was agreed upon, and</li>
+ <li>registering the function using the name String with the object which will emit the event.</li>
+</ul>
+
+<p>The function is said to be a 'listener' or a 'handler' with both names used interchangeably. This pattern can easily be followed using completely custom code, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">article on custom events</a>. The pattern is also used by modern web browsers which define many events emitted in response to user input or browser activity.</p>
+
+<p>Modern web browsers follow the event pattern using a standardized approach. Browsers use as the data structure for the properties of the event, an object derived from the <code>EventPrototype</code> object. Browsers use as the registration method for the function which will handle those data structures a method called <code>addEventListener</code> which expects as arguments a string event type name and the handler function. Finally, browsers define a large number of objects as event emitters and define a wide variety of event types generated by the objects.</p>
+
+<h2 id="Button_Event_Handler" name="Button_Event_Handler">Button Event Handler Demo</h2>
+
+<p>For example, browser <code>button</code> elements are intended to emit events named <code>'click'</code> in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap. We could define in the HTML page a <code>button</code> as:</p>
+
+<pre class="brush: html">&lt;button id="buttonOne"&gt;Click here to emit a 'click' event&lt;/button&gt;</pre>
+
+<p>and, in our JavaScript code, we could first define a function to listen to that <code>'click'</code> event:</p>
+
+<pre class="brush: js">var example_click_handler = function (ev){
+    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
+    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
+};</pre>
+
+<p>and second register our function with the the <code>Button</code> object, either on the scripting side using the DOM (Document Object Model) representation of the HTML page:</p>
+
+<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne');
+buttonDOMElement.addEventListener('click', example_click_handler);</pre>
+
+<p>or within the HTML page by adding the function as the value of the <code>'onclick'</code> attribute, although this second approach is usually only used in very simple web pages.</p>
+
+<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p>
+
+<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> JavaScript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p>
+
+<p>As a second example, much modern JavaScript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p>
+
+<pre class="brush: js">var funcInit = function(){
+    // user code goes here and can safely address all the HTML elements from the page
+    // since the document has successfully been 'loaded'
+}
+document.addEventListener('DOMContentLoaded', funcInit);
+</pre>
+
+<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p>
+
+<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p>
+
+<h2 id="Notable_events">Notable events</h2>
+
+<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p>
+
+<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p>
+
+<ul>
+ <li>the <code>window</code> object, such as due to resizing the browser,</li>
+ <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li>
+ <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li>
+ <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li>
+ <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li>
+ <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li>
+</ul>
+
+<p>although this list is currently incomplete.</p>
+
+<p>Some notable events are:</p>
+
+<div class="note">
+<p><strong>Note:</strong> This list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p>
+</div>
+
+<ul>
+ <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li>
+ <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li>
+ <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li>
+ <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li>
+</ul>
+
+<p> </p>
+
+<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2>
+
+<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p>
+
+<p>A partial diagram of the class hierarchy of event objects is:</p>
+
+<div class="note">
+<p><strong>Note:</strong> This diagram is incomplete.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p>
+
+<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p>
+
+<h2 id="Documents">Documents</h2>
+
+<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p>
+
+<ul>
+ <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li>
+ <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li>
+ <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>