From b307ee641c0ff90b0b7141f70a7e8dba7c4c05df Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 9 Jan 2022 23:07:21 +0900 Subject: Windows インターフェイスの FocusEvent の文書を更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/window/blur_event/index.html | 124 ------------------------- files/ja/web/api/window/blur_event/index.md | 124 +++++++++++++++++++++++++ files/ja/web/api/window/focus_event/index.html | 122 ------------------------ files/ja/web/api/window/focus_event/index.md | 122 ++++++++++++++++++++++++ 4 files changed, 246 insertions(+), 246 deletions(-) delete mode 100644 files/ja/web/api/window/blur_event/index.html create mode 100644 files/ja/web/api/window/blur_event/index.md delete mode 100644 files/ja/web/api/window/focus_event/index.html create mode 100644 files/ja/web/api/window/focus_event/index.md diff --git a/files/ja/web/api/window/blur_event/index.html b/files/ja/web/api/window/blur_event/index.html deleted file mode 100644 index 3cf637f790..0000000000 --- a/files/ja/web/api/window/blur_event/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -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 を設定します。

- -

関連情報

- - diff --git a/files/ja/web/api/window/blur_event/index.md b/files/ja/web/api/window/blur_event/index.md new file mode 100644 index 0000000000..3cf637f790 --- /dev/null +++ b/files/ja/web/api/window/blur_event/index.md @@ -0,0 +1,124 @@ +--- +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 を設定します。

+ +

関連情報

+ + diff --git a/files/ja/web/api/window/focus_event/index.html b/files/ja/web/api/window/focus_event/index.html deleted file mode 100644 index d000fb54fa..0000000000 --- a/files/ja/web/api/window/focus_event/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 'Window: focus イベント' -slug: Web/API/Window/focus_event -tags: - - API - - Event - - Focus - - FocusEvent - - Reference - - Web - - Window - - onfocus - - イベント -translation_of: Web/API/Window/focus_event ---- -
{{APIRef}}
- -

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

- -

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

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

例

- -

ライブデモ

- -

この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して focus および {{domxref("Window/blur_event", "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-focus")}}{{Spec2("UI Events")}}Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-focus")}}{{Spec2("DOM3 Events")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/window/focus_event/index.md b/files/ja/web/api/window/focus_event/index.md new file mode 100644 index 0000000000..d000fb54fa --- /dev/null +++ b/files/ja/web/api/window/focus_event/index.md @@ -0,0 +1,122 @@ +--- +title: 'Window: focus イベント' +slug: Web/API/Window/focus_event +tags: + - API + - Event + - Focus + - FocusEvent + - Reference + - Web + - Window + - onfocus + - イベント +translation_of: Web/API/Window/focus_event +--- +
{{APIRef}}
+ +

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

+ +

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

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

例

+ +

ライブデモ

+ +

この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して focus および {{domxref("Window/blur_event", "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-focus")}}{{Spec2("UI Events")}}Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-focus")}}{{Spec2("DOM3 Events")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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