From 27efa4a1adfb33a4915f804edd859b14b9785bed Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 9 Jan 2022 23:05:59 +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/blur_event/index.md | 176 +++++++++++++-------------- 1 file changed, 82 insertions(+), 94 deletions(-) (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/blur_event/index.md b/files/ja/web/api/element/blur_event/index.md index a91dd6fcc8..0a12f48e5d 100644 --- a/files/ja/web/api/element/blur_event/index.md +++ b/files/ja/web/api/element/blur_event/index.md @@ -5,136 +5,124 @@ tags: - API - DOM - Element - - Event + - イベント - FocusEvent - - Reference + - リファレンス - blur - onblur - - イベント +browser-compat: api.Element.blur_event translation_of: Web/API/Element/blur_event --- -
{{APIRef}}
+{{APIRef}} -

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

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

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

例

+## 例 -

簡単な例

+### 簡単な例 -

HTML

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

JavaScript

+#### JavaScript -
const password = document.querySelector('input[type="password"]');
+```js
+const password = document.querySelector('input[type="password"]');
 
-password.addEventListener('focus', (event) => {
+password.addEventListener('focus', (event) => {
   event.target.style.background = 'pink';
 });
 
-password.addEventListener('blur', (event) => {
+password.addEventListener('blur', (event) => {
   event.target.style.background = '';
-});
+}); +``` -

結果

+#### 結果 -

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

+{{EmbedLiveSample("Simple_example", '100%', '50px')}} -

イベント委譲

+### イベント委譲 -

このイベントのイベント委譲を実装する方法は二つあります。 {{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">
-</form>
+```html +
+ + +
+``` -

JavaScript

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

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

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

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

+{{Compat}} -

このイベントが処理されている間、 {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ({{bug(452307)}})。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の body を設定します。

+このイベントが処理されている間、 {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ({{bug(452307)}})。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。 -

関連情報

+## 関連情報 - +- 関連イベント: {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/focusin_event", "focusin")}}, {{domxref("Element/focusout_event", "focusout")}} +- `Window` を対象としたこのイベント: {{domxref("Window/blur_event", "blur")}} イベント -- cgit v1.2.3-54-g00ecf