From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/window/blur_event/index.html | 126 ++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 files/ja/web/api/window/blur_event/index.html (limited to 'files/ja/web/api/window/blur_event') diff --git a/files/ja/web/api/window/blur_event/index.html b/files/ja/web/api/window/blur_event/index.html new file mode 100644 index 0000000000..cc0be2e055 --- /dev/null +++ b/files/ja/web/api/window/blur_event/index.html @@ -0,0 +1,126 @@ +--- +title: 'Window: blur イベント' +slug: Web/API/Window/blur_event +tags: + - API + - Event + - FocusEvent + - Reference + - Web + - Window + - blur + - onblur + - イベント +translation_of: Web/API/Window/blur_event +--- +
{{APIRef}}
+ +

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

+ +

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

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

例

+ +

ライブデモ

+ +

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

+ +

HTML

+ +
<p id="log">Click on this document to give it focus.</p>
+ +

CSS

+ +
.paused {
+  background: #ddd;
+  color: #555;
+}
+ +

JavaScript

+ +
function pause() {
+  document.body.classList.add('paused');
+  log.textContent = 'FOCUS LOST!';
+}
+
+function play() {
+  document.body.classList.remove('paused');
+  log.textContent = 'This document has focus. Click outside the document to lose focus.';
+}
+
+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")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf