diff options
| -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")}} イベント |