From 8c78e0c9e7b9d1cf9063c803571e97832ab5f344 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 9 Jan 2022 23:48:56 +0900 Subject: 2021/09/19 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/focusout_event/index.md | 141 ++++++++++------------- 1 file changed, 63 insertions(+), 78 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/element/focusout_event/index.md b/files/ja/web/api/element/focusout_event/index.md index 0e0e661a6b..41d5f64af3 100644 --- a/files/ja/web/api/element/focusout_event/index.md +++ b/files/ja/web/api/element/focusout_event/index.md @@ -5,106 +5,91 @@ tags: - API - DOM - Element - - Event + - イベント - FocusEvent - - Reference + - リファレンス - focusout - onfocusout - - イベント +browser-compat: api.Element.focusout_event translation_of: Web/API/Element/focusout_event --- -
{{APIRef}}
+{{APIRef}} -

focusout イベントは、要素がフォーカスを失おうとしているときに発生します。このイベントと {{domxref("Element/blur_event", "blur")}} との主な違いは、 focusout がバブリングを行うのに対し blur は行わないことです。

+**`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")}} です。

+`focusout` の反対は {{domxref("Element/focusin_event", "focusin")}} です。 - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{DOMxRef("FocusEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onfocusout", "onfocusout")}}
同期 / 非同期同期
Composedはい
バブリングあり
キャンセル不可
インターフェイス{{DOMxRef("FocusEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers/onfocusout", "onfocusout")}} +
同期 / 非同期同期
Composedはい
-

例

+## 例 -

ライブデモ

+### ライブデモ -

HTML

+#### HTML -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
+```html +
+ + +
+``` -

JavaScript

+#### JavaScript -
const form = document.getElementById('form');
+```js
+const form = document.getElementById('form');
 
-form.addEventListener('focusin', (event) => {
+form.addEventListener('focusin', (event) => {
   event.target.style.background = 'pink';
 });
 
-form.addEventListener('focusout', (event) => {
+form.addEventListener('focusout', (event) => {
   event.target.style.background = '';
-});
- -

結果

- -

{{EmbedLiveSample("Live_example", '100%', '50px')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("UI Events", "#event-type-focusout")}}{{Spec2("UI Events")}}Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-focusout")}}{{Spec2("DOM3 Events")}}初回定義
+}); +``` + +#### 結果 + +{{EmbedLiveSample("Live_example", '100%', '50px')}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("api.Element.focusout_event")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- 関連イベント: {{domxref("Element/blur_event", "blur")}}, {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/focusin_event", "focusin")}} +- [Focusing: focus/blur](https://javascript.info/focus-blur) -- cgit v1.2.3-54-g00ecf