From 17f9011449c438ba44b242311ff1fd17ee21913f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 9 Jan 2022 23:16:22 +0900 Subject: 2021/09/19 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/focus_event/index.md | 175 ++++++++++++-------------- 1 file changed, 82 insertions(+), 93 deletions(-) diff --git a/files/ja/web/api/element/focus_event/index.md b/files/ja/web/api/element/focus_event/index.md index c087c896b0..649523a4da 100644 --- a/files/ja/web/api/element/focus_event/index.md +++ b/files/ja/web/api/element/focus_event/index.md @@ -5,133 +5,122 @@ tags: - API - DOM - Element - - Event + - イベント - Focus - FocusEvent - - Reference - - イベント + - リファレンス +browser-compat: api.Element.focus_event translation_of: Web/API/Element/focus_event --- -
{{APIRef}}
+{{APIRef}} -

focus イベントは、要素がフォーカスを受け取ったときに発生します。このイベントと {{domxref("Element/focusin_event", "focusin")}} との違いは、 focusin がバブリングを行うのに対し focus は行わないことです。

+**`focus`** イベントは、要素がフォーカスを受け取ったときに発生します。このイベントと {{domxref("Element/focusin_event", "focusin")}} との違いは、 `focusin` がバブリングするのに対し `focus` はしないことです。 -

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

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

例

+## 例 -

簡単な例

+### 簡単な例 -

HTML

+#### HTML -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
+```html +
+ + +
+``` -

JavaScript

+#### JavaScript -
const password = document.querySelector('input[type="password"]');
+```js
+const password = document.querySelector('input[type="password"]');
 
-password.addEventListener('focus', (event) => {
+password.addEventListener('focus', (event) => {
   event.target.style.background = 'pink';
 });
 
-password.addEventListener('blur', (event) => {
+password.addEventListener('blur', (event) => {
   event.target.style.background = '';
-});
+}); +``` -

結果

+#### 結果 -

{{EmbedLiveSample("Simple_example", '100%', '50px')}}

+{{EmbedLiveSample("Simple_example", '100%', '50px')}} -

イベント委譲

+### イベント委譲 -

このイベントのイベント委譲を実装する方法は二つあります。 {{Event("focusout")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の useCapture 引数に true を設定するかです。

+このイベントのイベント委譲を実装する方法は二つあります。 {{domxref("Element/focusin_event", "focusin")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の `useCapture` 引数に `true` を設定するかです。 -

HTML

+#### HTML -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
+```html +
+ + +
+``` -

JavaScript

+#### JavaScript -
const form = document.getElementById('form');
+```js
+const form = document.getElementById('form');
 
-form.addEventListener('focus', (event) => {
+form.addEventListener('focus', (event) => {
   event.target.style.background = 'pink';
 }, true);
 
-form.addEventListener('blur', (event) => {
+form.addEventListener('blur', (event) => {
   event.target.style.background = '';
-}, true);
- -

結果

- -

{{EmbedLiveSample("Event_delegation", '100%', '50px')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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")}}初回定義
+}, true); +``` + +#### 結果 + +{{EmbedLiveSample("Event_delegation", '100%', '50px')}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの対応

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

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

+{{Compat}} -

関連情報

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