diff --git a/files/ja/web/api/element/blur_event/index.md b/files/ja/web/api/element/blur_event/index.md
index e9bf1dc92924a8..6642182660c4c4 100644
--- a/files/ja/web/api/element/blur_event/index.md
+++ b/files/ja/web/api/element/blur_event/index.md
@@ -1,44 +1,47 @@
 ---
-title: 'Element: blur イベント'
+title: "Element: blur イベント"
+short-title: blur
 slug: Web/API/Element/blur_event
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef}}
 
-**`blur`** イベントは、要素がフォーカスを失ったときに発生します。このイベントと {{domxref("Element/focusout_event", "focusout")}} との違いは、 `focusout` が[バブリング](/ja/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)するのに対し、 `blur` はしないことです。
-
-`blur` の反対は {{domxref("Element/focus_event", "focus")}} です。
-
-<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("FocusEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers/onblur", "onblur")}}
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">同期 / 非同期</th>
-      <td>同期</td>
-    </tr>
-    <tr>
-      <th scope="row">Composed</th>
-      <td>はい</td>
-    </tr>
-  </tbody>
-</table>
+**`blur`** イベントは、要素がフォーカスを失ったときに発生します。このイベントはバブリングしませんが、続いて発生する関連する {{domxref("Element/focusout_event", "focusout")}} イベントはバブリングします。
+
+要素は他の要素が選択されるとフォーカスを失います。
+また、`hidden`のようなフォーカスを許可しないスタイルが適用された場合や、文書から要素が除去された場合もフォーカスを失います。どちらの場合も、フォーカスは `body` 要素（ビューポート）へ移動します。
+なお、フォーカスされた要素が文書から除去された場合には `blur` は発生しないことに注意してください。
+
+<!-- Prior to FF110 elements did not lose focus if the style changed to hidden (say) -->
+
+`blur` の反対は {{domxref("Element/focus_event", "focus")}} イベントであり、こちらは要素がフォーカスを得たときに発生します。
+
+`blur` イベントはキャンセル不可です。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("blur", (event) => {});
+
+onblur = (event) => {};
+```
+
+## イベント型
+
+{{domxref("FocusEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("FocusEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("UIEvent")}} および間接的に {{domxref("Event")}} から継承したプロパティもあります_。
+
+- {{domxref("FocusEvent.relatedTarget")}}
+  - : もしあれば、フォーカスを受け取った要素。
 
 ## 例
 
@@ -48,8 +51,14 @@ slug: Web/API/Element/blur_event
 
 ```html
 <form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
+  <label>
+    テキストを入力:
+    <input type="text" placeholder="テキストを入力" />
+  </label>
+  <label>
+    パスワード:
+    <input type="password" placeholder="password" />
+  </label>
 </form>
 ```
 
@@ -58,12 +67,12 @@ slug: Web/API/Element/blur_event
 ```js
 const password = document.querySelector('input[type="password"]');
 
-password.addEventListener('focus', (event) => {
-  event.target.style.background = 'pink';
+password.addEventListener("focus", (event) => {
+  event.target.style.background = "pink";
 });
 
-password.addEventListener('blur', (event) => {
-  event.target.style.background = '';
+password.addEventListener("blur", (event) => {
+  event.target.style.background = "";
 });
 ```
 
@@ -73,29 +82,43 @@ password.addEventListener('blur', (event) => {
 
 ### イベント委譲
 
-このイベントのイベント委譲を実装する方法は 2 つあります。 {{domxref("Element/focusout_event", "focusout")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の `useCapture` 引数に `true` を設定するかです。
+このイベントのイベント委譲を実装する方法は 2 つあります。{{domxref("Element/focusout_event", "focusout")}} イベントを使用するか、{{domxref("EventTarget.addEventListener()", "addEventListener()")}} の `useCapture` 引数に `true` を設定するかです。
 
 #### HTML
 
 ```html
 <form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
+  <label>
+    テキストを入力:
+    <input type="text" placeholder="テキストを入力" />
+  </label>
+  <label>
+    パスワード:
+    <input type="password" placeholder="password" />
+  </label>
 </form>
 ```
 
 #### JavaScript
 
 ```js
-const form = document.getElementById('form');
-
-form.addEventListener('focus', (event) => {
-  event.target.style.background = 'pink';
-}, true);
-
-form.addEventListener('blur', (event) => {
-  event.target.style.background = '';
-}, true);
+const form = document.getElementById("form");
+
+form.addEventListener(
+  "focus",
+  (event) => {
+    event.target.style.background = "pink";
+  },
+  true,
+);
+
+form.addEventListener(
+  "blur",
+  (event) => {
+    event.target.style.background = "";
+  },
+  true,
+);
 ```
 
 #### 結果
@@ -110,9 +133,11 @@ form.addEventListener('blur', (event) => {
 
 {{Compat}}
 
-このイベントが処理されている間、 {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ([Firefox バグ 452307](https://bugzil.la/452307))。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。
+このイベントが処理されている間、{{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ([Firefox バグ 452307](https://bugzil.la/452307))。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。
 
 ## 関連情報
 
+- {{domxref("HTMLElement.blur()")}} メソッド
 - 関連イベント: {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/focusin_event", "focusin")}}, {{domxref("Element/focusout_event", "focusout")}}
 - `Window` を対象としたこのイベント: {{domxref("Window/blur_event", "blur")}} イベント
+- [Focusing: focus/blur](https://javascript.info/focus-blur)
diff --git a/files/ja/web/api/element/focus_event/index.md b/files/ja/web/api/element/focus_event/index.md
index b19c6373bf87d0..11c93a49174422 100644
--- a/files/ja/web/api/element/focus_event/index.md
+++ b/files/ja/web/api/element/focus_event/index.md
@@ -1,44 +1,41 @@
 ---
-title: 'Element: focus イベント'
+title: "Element: focus イベント"
+short-title: focus
 slug: Web/API/Element/focus_event
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef}}
 
-**`focus`** イベントは、要素がフォーカスを受け取ったときに発生します。このイベントと {{domxref("Element/focusin_event", "focusin")}} との違いは、 `focusin` がバブリングするのに対し `focus` はしないことです。
-
-`focus` の反対は {{domxref("Element/blur_event", "blur")}} です。
-
-<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("FocusEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">同期 / 非同期</th>
-      <td>同期</td>
-    </tr>
-    <tr>
-      <th scope="row">Composed</th>
-      <td>はい</td>
-    </tr>
-  </tbody>
-</table>
+**`focus`** イベントは、要素がフォーカスを受け取ったときに発生します。このイベントはバブリングしませんが、その後に発生する関連する {{domxref("Element/focusin_event", "focusin")}} イベントはバブリングします。
+
+`focus` の反対は {{domxref("Element/blur_event", "blur")}} であり、これは要素がフォーカスを失ったときに発生します。
+
+`focus` イベントはキャンセル不可です。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("focus", (event) => {});
+
+onfocus = (event) => {};
+```
+
+## イベント型
+
+{{domxref("FocusEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("FocusEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("UIEvent")}} および間接的に {{domxref("Event")}} から継承したプロパティもあります_。
+
+- {{domxref("FocusEvent.relatedTarget")}}
+  - : もしあれば、フォーカスを受け取った要素。
 
 ## 例
 
@@ -48,8 +45,14 @@ slug: Web/API/Element/focus_event
 
 ```html
 <form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
+  <label>
+    テキストを入力:
+    <input type="text" placeholder="テキストを入力" />
+  </label>
+  <label>
+    パスワード:
+    <input type="password" placeholder="password" />
+  </label>
 </form>
 ```
 
@@ -58,12 +61,12 @@ slug: Web/API/Element/focus_event
 ```js
 const password = document.querySelector('input[type="password"]');
 
-password.addEventListener('focus', (event) => {
-  event.target.style.background = 'pink';
+password.addEventListener("focus", (event) => {
+  event.target.style.background = "pink";
 });
 
-password.addEventListener('blur', (event) => {
-  event.target.style.background = '';
+password.addEventListener("blur", (event) => {
+  event.target.style.background = "";
 });
 ```
 
@@ -73,29 +76,43 @@ password.addEventListener('blur', (event) => {
 
 ### イベント委譲
 
-このイベントのイベント委譲を実装する方法は二つあります。 {{domxref("Element/focusin_event", "focusin")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の `useCapture` 引数に `true` を設定するかです。
+このイベントのイベント委譲を実装する方法は 2 つあります。 {{domxref("Element/focusin_event", "focusin")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の `useCapture` 引数に `true` を設定するかです。
 
 #### HTML
 
 ```html
 <form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
+  <label>
+    テキストを入力:
+    <input type="text" placeholder="テキストを入力" />
+  </label>
+  <label>
+    パスワード:
+    <input type="password" placeholder="password" />
+  </label>
 </form>
 ```
 
 #### JavaScript
 
 ```js
-const form = document.getElementById('form');
-
-form.addEventListener('focus', (event) => {
-  event.target.style.background = 'pink';
-}, true);
-
-form.addEventListener('blur', (event) => {
-  event.target.style.background = '';
-}, true);
+const form = document.getElementById("form");
+
+form.addEventListener(
+  "focus",
+  (event) => {
+    event.target.style.background = "pink";
+  },
+  true,
+);
+
+form.addEventListener(
+  "blur",
+  (event) => {
+    event.target.style.background = "";
+  },
+  true,
+);
 ```
 
 #### 結果
@@ -112,6 +129,7 @@ form.addEventListener('blur', (event) => {
 
 ## 関連情報
 
+- {{domxref("HTMLElement.focus()")}} メソッド
 - 関連イベント: {{domxref("Element/blur_event", "blur")}}, {{domxref("Element/focusin_event", "focusin")}}, {{domxref("Element/focusout_event", "focusout")}}
 - `Window` を対象としたこのイベント: {{domxref("Window/focus_event", "focus")}} イベント
 - [Focusing: focus/blur](https://javascript.info/focus-blur)