diff --git a/files/ja/web/api/element/focusin_event/index.md b/files/ja/web/api/element/focusin_event/index.md
index 1b131f1b00440d..b07f81f30ae83c 100644
--- a/files/ja/web/api/element/focusin_event/index.md
+++ b/files/ja/web/api/element/focusin_event/index.md
@@ -1,44 +1,39 @@
---
-title: 'Element: focusin イベント'
+title: "Element: focusin イベント"
+short-title: focusin
slug: Web/API/Element/focusin_event
+l10n:
+ sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
---
{{APIRef}}
**`focusin`** イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと {{domxref("Element/focus_event", "focus")}} との主な違いは、 `focusin` がバブリングを行うのに対し `focus` は行わないことです。
-`focusin` の反対は {{domxref("Element/focusout_event", "focusout")}} です。
-
-
-
-
- バブリング |
- あり |
-
-
- キャンセル |
- 不可 |
-
-
- インターフェイス |
- {{DOMxRef("FocusEvent")}} |
-
-
- イベントハンドラープロパティ |
-
- {{domxref("GlobalEventHandlers/onfocusin", "onfocusin")}}
- |
-
-
- 同期 / 非同期 |
- 同期 |
-
-
- Composed |
- はい |
-
-
-
+`focusin` の反対は {{domxref("Element/focusout_event", "focusout")}} であり、これは要素がフォーカスを失ったときに発生します。
+
+`focusin` イベントはキャンセル不可です。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用してください。
+
+```js
+addEventListener("focusin", (event) => {});
+```
+
+## イベント型
+
+{{domxref("FocusEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("FocusEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("UIEvent")}} および間接的に {{domxref("Event")}} から継承したプロパティもあります_。
+
+- {{domxref("FocusEvent.relatedTarget")}}
+ - : もしあれば、フォーカスを受け取った要素。
## 例
@@ -48,22 +43,28 @@ slug: Web/API/Element/focusin_event
```html
```
#### JavaScript
```js
-const form = document.getElementById('form');
+const form = document.getElementById("form");
-form.addEventListener('focusin', (event) => {
- event.target.style.background = 'pink';
+form.addEventListener("focusin", (event) => {
+ event.target.style.background = "pink";
});
-form.addEventListener('focusout', (event) => {
- event.target.style.background = '';
+form.addEventListener("focusout", (event) => {
+ event.target.style.background = "";
});
```
@@ -75,6 +76,8 @@ form.addEventListener('focusout', (event) => {
{{Specifications}}
+**メモ:** _UI Events_ 仕様書では[フォーカスイベントの順序](/ja/docs/Web/API/FocusEvent#order_of_events)を記述していますが、現在のブラウザーの実装とは異なります。
+
## ブラウザーの互換性
{{Compat}}
diff --git a/files/ja/web/api/element/focusout_event/index.md b/files/ja/web/api/element/focusout_event/index.md
index 99e867cfe4483b..6e001d7f276842 100644
--- a/files/ja/web/api/element/focusout_event/index.md
+++ b/files/ja/web/api/element/focusout_event/index.md
@@ -1,44 +1,39 @@
---
-title: 'Element: focusout イベント'
+title: "Element: focusout イベント"
+short-title: focusout
slug: Web/API/Element/focusout_event
+l10n:
+ sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
---
{{APIRef}}
-**`focusout`** イベントは、要素がフォーカスを失おうとしているときに発生します。このイベントと {{domxref("Element/blur_event", "blur")}} との主な違いは、 `focusout` が[バブリング](/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)するのに対し `blur` はしないことです。
-
-`focusout` の反対は {{domxref("Element/focusin_event", "focusin")}} です。
-
-
-
-
- バブリング |
- あり |
-
-
- キャンセル |
- 不可 |
-
-
- インターフェイス |
- {{DOMxRef("FocusEvent")}} |
-
-
- イベントハンドラープロパティ |
-
- {{domxref("GlobalEventHandlers/onfocusout", "onfocusout")}}
- |
-
-
- 同期 / 非同期 |
- 同期 |
-
-
- Composed |
- はい |
-
-
-
+**`focusout`** イベントは、要素がフォーカスを失おうとしているときに発生します。このイベントと {{domxref("Element/blur_event", "blur")}} との主な違いは、 `focusout` がバブリングするのに対し `blur` はしないことです。
+
+`focusout` の反対は {{domxref("Element/focusin_event", "focusin")}} であり、こちらは要素がフォーカスを受け取ったときに発生します。
+
+`focusout` イベントはキャンセル不可です。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用してください。
+
+```js
+addEventListener("focusout", (event) => {});
+```
+
+## イベント型
+
+{{domxref("FocusEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("FocusEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("UIEvent")}} および間接的に {{domxref("Event")}} から継承したプロパティもあります_。
+
+- {{domxref("FocusEvent.relatedTarget")}}
+ - : もしあれば、フォーカスを受け取った要素。
## 例
@@ -48,22 +43,28 @@ slug: Web/API/Element/focusout_event
```html
```
#### JavaScript
```js
-const form = document.getElementById('form');
+const form = document.getElementById("form");
-form.addEventListener('focusin', (event) => {
- event.target.style.background = 'pink';
+form.addEventListener("focusin", (event) => {
+ event.target.style.background = "pink";
});
-form.addEventListener('focusout', (event) => {
- event.target.style.background = '';
+form.addEventListener("focusout", (event) => {
+ event.target.style.background = "";
});
```
@@ -75,6 +76,8 @@ form.addEventListener('focusout', (event) => {
{{Specifications}}
+**メモ:** _UI Events_ 仕様書では[フォーカスイベントの順序](/ja/docs/Web/API/FocusEvent#order_of_events)を記述していますが、現在のブラウザーの実装とは異なります。
+
## ブラウザーの互換性
{{Compat}}