From e848f9c492b3ce8f3adf33eda4f548d5b89fd384 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 9 Jan 2022 23:26:05 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/window/focus_event/index.md | 144 ++++++++++++--------------- 1 file changed, 65 insertions(+), 79 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/window/focus_event/index.md b/files/ja/web/api/window/focus_event/index.md index d000fb54fa..75d432508b 100644 --- a/files/ja/web/api/window/focus_event/index.md +++ b/files/ja/web/api/window/focus_event/index.md @@ -3,71 +3,78 @@ title: 'Window: focus イベント' slug: Web/API/Window/focus_event tags: - API - - Event + - イベント - Focus - FocusEvent - - Reference - - Web + - リファレンス + - ウェブ - Window - onfocus - - イベント +browser-compat: api.Window.focus_event translation_of: Web/API/Window/focus_event --- -
{{APIRef}}
+{{APIRef}} -

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

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

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

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

+## 例 -

ライブデモ

+### ライブデモ -

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

+この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して `focus` および {{domxref("Window/blur_event", "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,43 +87,22 @@ function play() {
 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")}}初回定義
+window.addEventListener('focus', play); +``` + +#### 結果 + +{{EmbedLiveSample("Live_example")}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

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