diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-09 23:08:45 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-20 00:15:02 +0900 |
commit | 49dd2e886bda02c9240970f867c7291d65af2f89 (patch) | |
tree | 444c9e802d999fed6eeb21dc0394c1d3432d5169 | |
parent | b307ee641c0ff90b0b7141f70a7e8dba7c4c05df (diff) | |
download | translated-content-49dd2e886bda02c9240970f867c7291d65af2f89.tar.gz translated-content-49dd2e886bda02c9240970f867c7291d65af2f89.tar.bz2 translated-content-49dd2e886bda02c9240970f867c7291d65af2f89.zip |
2021/09/15 時点の英語版に同期
Update index.md
-rw-r--r-- | files/ja/web/api/window/blur_event/index.md | 146 |
1 files changed, 66 insertions, 80 deletions
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 --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><strong><code>blur</code></strong> イベントは、要素がフォーカスを失ったときに発生します。</p> +**`blur`** イベントは、要素がフォーカスを失ったときに発生します。 -<p><code>blur</code> の反対は {{domxref("Window/focus_event", "focus")}} です。</p> +`blur` の反対は {{domxref("Window/focus_event", "focus")}} です。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>なし</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>不可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{DOMxRef("FocusEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers/onblur", "onblur")}}</td> - </tr> - <tr> - <th>同期 / 非同期</th> - <td>同期</td> - </tr> - <tr> - <th>Composed</th> - <td>はい</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("FocusEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers/onblur", "onblur")}} + </td> + </tr> + <tr> + <th scope="row">同期 / 非同期</th> + <td>同期</td> + </tr> + <tr> + <th scope="row">Composed</th> + <td>はい</td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Live_example" name="Live_example">ライブデモ</h3> +### ライブデモ -<p>この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して {{domxref("Window/focus_event", "focus")}} および <code>blur</code> イベントを監視します。</p> +この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して {{domxref("Window/focus_event", "focus")}} および `blur` イベントを監視します。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><p id="log">Click on this document to give it focus.</p></pre> +```html +<p id="log">Click on this document to give it focus.</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.paused { +```css +.paused { background: #ddd; color: #555; -}</pre> +} +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">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);</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Live_example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("UI Events", "#event-type-blur")}}</td> - <td>{{Spec2("UI Events")}}</td> - <td>Added info that this event is composed.</td> - </tr> - <tr> - <td>{{SpecName("DOM3 Events", "#event-type-blur")}}</td> - <td>{{Spec2("DOM3 Events")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +window.addEventListener('focus', play); +``` + +#### 結果 + +{{EmbedLiveSample("Live_example")}} + +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Window.blur_event")}}</p> +{{Compat}} -<p>このイベントが処理されている間の {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ({{bug(452307)}})。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の <code>body</code> を設定します。</p> +このイベントが処理されている間、 {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ({{bug(452307)}})。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。 -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>関連イベント: {{domxref("Window/focus_event", "focus")}}</li> - <li><code>Element</code> を対象としたこのイベント: {{domxref("Element/blur_event", "blur")}} イベント</li> -</ul> +- 関連イベント: {{domxref("Window/focus_event", "focus")}} +- `Element` を対象としたこのイベント: {{domxref("Element/blur_event", "blur")}} イベント |