Element 要素の MouseEvent 系のイベントを更新

- 2021/10/24 時点の英語版に基づく
- contextmenu と auxclick は新規翻訳

1 files changed, 85 insertions, 94 deletions

diff --git a/files/ja/web/api/element/mouseleave_event/index.md b/files/ja/web/api/element/mouseleave_event/index.md
index e98bf28c3b..ff6db4417f 100644
--- a/files/ja/web/api/element/mouseleave_event/index.md
+++ b/files/ja/web/api/element/mouseleave_event/index.md
@@ -5,92 +5,101 @@ tags:
   - API
   - DOM
   - Element
-  - Event
+  - イベント
   - MouseEvent
-  - Reference
-  - events
-  - mouse
+  - リファレンス
+  - マウス
   - mouseleave
   - move
+browser-compat: api.Element.mouseleave_event
 translation_of: Web/API/Element/mouseleave_event
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p><span class="seoSummary"><strong><code>mouseleave</code></strong> イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。</span></p>
+**`mouseleave`** イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">バブリング</th>
-   <td>なし</td>
-  </tr>
-  <tr>
-   <th scope="row">キャンセル</th>
-   <td>不可</td>
-  </tr>
-  <tr>
-   <th scope="row">インターフェイス</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">イベントハンドラープロパティ</th>
-   <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">バブリング</th>
+      <td>なし</td>
+    </tr>
+    <tr>
+      <th scope="row">キャンセル</th>
+      <td>不可</td>
+    </tr>
+    <tr>
+      <th scope="row">インターフェイス</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">イベントハンドラープロパティ</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p><code>mouseleave</code> と {{event('mouseout')}} はよく似ていますが、 <code>mouseleave</code> はバブリングしないのに対して <code>mouseout</code> はバブリングするという点が異なります。すなわち <code>mouseleave</code> はポインターがその要素<em>および</em>すべての子孫を出たときに発行されるのに対し、 <code>mouseout</code> はポインターがその要素<em>または</em>その要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。</p>
+`mouseleave` と {{domxref("Element/mouseout_event", "mouseout")}} はよく似ていますが、 `mouseleave` はバブリングしないのに対して `mouseout` はバブリングするという点が異なります。すなわち `mouseleave` はポインターがその要素*および*すべての子孫を出たときに発行されるのに対し、 `mouseout` はポインターがその要素*または*その要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。
 
-<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
-<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div>
+#### `mouseleave` イベントの動作
 
-<p>階層内のそれぞれの要素からポインターが出たとき、 <code>mouseleave</code> イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが4つの要素の階層にあるテキストから div が表す領域の外に出ると、4つのイベントが4つの要素に送られます。</p>
+![](mouseleave.png)
 
-<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div>
+階層内のそれぞれの要素からポインターが出たとき、 `mouseleave` イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが 4 つの要素の階層にあるテキストから div が表す領域の外に出ると、4 つのイベントが 4 つの要素に送られます。
 
-<p>単一の <code>mouseout</code> イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。</p>
-</div>
+#### `mouseout` イベントの動作
+
+![](mouseout.png)
+
+単一の `mouseout` イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<p><a href="/ja/docs/Web/API/Element/mouseout_event#Examples"><code>mouseout</code></a> のドキュメントには、 <code>mouseout</code> と <code>mouseleave</code> との違いを説明する例があります。</p>
+[`mouseout`](/ja/docs/Web/API/Element/mouseout_event#examples) のドキュメントには、 `mouseout` と `mouseleave` との違いを説明する例があります。
 
-<h3 id="mouseleave">mouseleave</h3>
+### mouseleave
 
-<p>次の例では <code>mouseenter</code> イベントを使用して、マウスが <code>&lt;div&gt;</code> に割り当てられた空間に入ったときにその境界線を変更しています。次に、 <code>mouseenter</code> イベントまたは <code>mouseleave</code> イベントの番号を指定してリストに項目を追加します。</p>
+次の例では `mouseenter` イベントを使用して、マウスが `<div>` に割り当てられた空間に入ったときにその境界線を変更しています。次に、 `mouseenter` イベントまたは `mouseleave` イベントの番号を指定してリストに項目を追加します。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div id='mouseTarget'&gt;
- &lt;ul id="unorderedList"&gt;
-  &lt;li&gt;No events yet!&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/div&gt;</pre>
+```html
+<div id='mouseTarget'>
+ <ul id="unorderedList">
+ - No events yet!
+ </ul>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<p><code>&lt;div&gt;</code> がもっと目立つようにスタイル付けします。</p>
+`<div>` がもっと目立つようにスタイル付けします。
 
-<pre class="brush: css notranslate">#mouseTarget {
+```css
+#mouseTarget {
   box-sizing: border-box;
   width:15rem;
   border:1px solid #333;
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js notranslate">var enterEventCount = 0;
+```js
+var enterEventCount = 0;
 var leaveEventCount = 0;
 const mouseTarget = document.getElementById('mouseTarget');
 const unorderedList = document.getElementById('unorderedList');
 
-mouseTarget.addEventListener('mouseenter', e =&gt; {
+mouseTarget.addEventListener('mouseenter', e => {
   mouseTarget.style.border = '5px dotted orange';
   enterEventCount++;
   addListItem('This is mouseenter event ' + enterEventCount + '.');
 });
 
-mouseTarget.addEventListener('mouseleave', e =&gt; {
+mouseTarget.addEventListener('mouseleave', e => {
   mouseTarget.style.border = '1px solid #333';
   leaveEventCount++;
   addListItem('This is mouseleave event ' + leaveEventCount + '.');
@@ -108,49 +117,31 @@ function addListItem(text) {
 
   // 新しく生成されたリスト項目をリストへ追加
   unorderedList.appendChild(newListItem);
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('mouseleave')}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-  </tr>
- </thead>
- <thead>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </thead>
-</table>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('mouseleave')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.mouseleave_event")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
- <li>{{domxref("Element/mousedown_event", "mousedown")}}</li>
- <li>{{domxref("Element/mouseup_event", "mouseup")}}</li>
- <li>{{domxref("Element/mousemove_event", "mousemove")}}</li>
- <li>{{domxref("Element/click_event", "click")}}</li>
- <li>{{domxref("Element/dblclick_event", "dblclick")}}</li>
- <li>{{domxref("Element/mouseover_event", "mouseover")}}</li>
- <li>{{domxref("Element/mouseout_event", "mouseout")}}</li>
- <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li>
- <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li>
- <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li>
-</ul>
+- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events)
+- {{domxref("Element/mousedown_event", "mousedown")}}
+- {{domxref("Element/mouseup_event", "mouseup")}}
+- {{domxref("Element/mousemove_event", "mousemove")}}
+- {{domxref("Element/click_event", "click")}}
+- {{domxref("Element/dblclick_event", "dblclick")}}
+- {{domxref("Element/mouseover_event", "mouseover")}}
+- {{domxref("Element/mouseout_event", "mouseout")}}
+- {{domxref("Element/mouseenter_event", "mouseenter")}}
+- {{domxref("Element/mouseleave_event", "mouseleave")}}
+- {{domxref("Element/contextmenu_event", "contextmenu")}}