From 49dd2e886bda02c9240970f867c7291d65af2f89 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 9 Jan 2022 23:08:45 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update index.md --- files/ja/web/api/window/blur_event/index.md | 146 +++++++++++++--------------- 1 file changed, 66 insertions(+), 80 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/window/blur_event/index.md b/files/ja/web/api/window/blur_event/index.md index 3cf637f790..1e32ad9beb 100644 --- a/files/ja/web/api/window/blur_event/index.md +++ b/files/ja/web/api/window/blur_event/index.md @@ -3,71 +3,78 @@ title: 'Window: blur イベント' slug: Web/API/Window/blur_event tags: - API - - Event + - イベント - FocusEvent - - Reference - - Web + - リファレンス + - ウェブ - Window - blur - onblur - - イベント +browser-compat: api.Window.blur_event translation_of: Web/API/Window/blur_event --- -
{{APIRef}}
+{{APIRef}} -

blur イベントは、要素がフォーカスを失ったときに発生します。

+**`blur`** イベントは、要素がフォーカスを失ったときに発生します。 -

blur の反対は {{domxref("Window/focus_event", "focus")}} です。

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

例

+## 例 -

ライブデモ

+### ライブデモ -

この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して {{domxref("Window/focus_event", "focus")}} および blur イベントを監視します。

+この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して {{domxref("Window/focus_event", "focus")}} および `blur` イベントを監視します。 -

HTML

+#### HTML -
<p id="log">Click on this document to give it focus.</p>
+```html +

Click on this document to give it focus.

+``` -

CSS

+#### CSS -
.paused {
+```css
+.paused {
   background: #ddd;
   color: #555;
-}
+} +``` -

JavaScript

+#### JavaScript -
function pause() {
+```js
+function pause() {
   document.body.classList.add('paused');
   log.textContent = 'FOCUS LOST!';
 }
@@ -80,45 +87,24 @@ function play() {
 const log = document.getElementById('log');
 
 window.addEventListener('blur', pause);
-window.addEventListener('focus', play);
- -

結果

- -

{{EmbedLiveSample("Live_example")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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")}}初回定義
+window.addEventListener('focus', play); +``` + +#### 結果 + +{{EmbedLiveSample("Live_example")}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

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

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

+{{Compat}} -

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

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

関連情報

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