From f379221d04ca6f214a3f84519368d35d510bf417 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 Jul 2023 03:17:05 +0900 Subject: [PATCH] =?UTF-8?q?2023/04/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/element/focusin_event/index.md | 83 +++++++++--------- .../web/api/element/focusout_event/index.md | 87 ++++++++++--------- 2 files changed, 88 insertions(+), 82 deletions(-) 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}}