Skip to content

Commit

Permalink
2023/07/07 時点の英語版に同期
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfuji09
mfuji09 committed Jul 26, 2023
1 parent 14342ca commit c312f99
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 107 deletions.
133 changes: 79 additions & 54 deletions files/ja/web/api/element/blur_event/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,47 @@
---
title: 'Element: blur イベント'
title: "Element: blur イベント"
short-title: blur
slug: Web/API/Element/blur_event
l10n:
sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---

{{APIRef}}

**`blur`** イベントは、要素がフォーカスを失ったときに発生します。このイベントと {{domxref("Element/focusout_event", "focusout")}} との違いは、 `focusout` が[バブリング](/ja/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)するのに対し、 `blur` はしないことです。

`blur` の反対は {{domxref("Element/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 scope="row">同期 / 非同期</th>
<td>同期</td>
</tr>
<tr>
<th scope="row">Composed</th>
<td>はい</td>
</tr>
</tbody>
</table>
**`blur`** イベントは、要素がフォーカスを失ったときに発生します。このイベントはバブリングしませんが、続いて発生する関連する {{domxref("Element/focusout_event", "focusout")}} イベントはバブリングします。

要素は他の要素が選択されるとフォーカスを失います。
また、`hidden`のようなフォーカスを許可しないスタイルが適用された場合や、文書から要素が除去された場合もフォーカスを失います。どちらの場合も、フォーカスは `body` 要素（ビューポート）へ移動します。
なお、フォーカスされた要素が文書から除去された場合には `blur` は発生しないことに注意してください。

<!-- Prior to FF110 elements did not lose focus if the style changed to hidden (say) -->

`blur` の反対は {{domxref("Element/focus_event", "focus")}} イベントであり、こちらは要素がフォーカスを得たときに発生します。

`blur` イベントはキャンセル不可です。

## 構文

このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("blur", (event) => {});

onblur = (event) => {};
```

## イベント型

{{domxref("FocusEvent")}} です。 {{domxref("Event")}} を継承しています。

{{InheritanceDiagram("FocusEvent")}}

## イベントプロパティ

_親である {{domxref("UIEvent")}} および間接的に {{domxref("Event")}} から継承したプロパティもあります_。

- {{domxref("FocusEvent.relatedTarget")}}
- : もしあれば、フォーカスを受け取った要素。

## 例

Expand All @@ -48,8 +51,14 @@ slug: Web/API/Element/blur_event

```html
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
<label>
テキストを入力:
<input type="text" placeholder="テキストを入力" />
</label>
<label>
パスワード:
<input type="password" placeholder="password" />
</label>
</form>
```

Expand All @@ -58,12 +67,12 @@ slug: Web/API/Element/blur_event
```js
const password = document.querySelector('input[type="password"]');

password.addEventListener('focus', (event) => {
event.target.style.background = 'pink';
password.addEventListener("focus", (event) => {
event.target.style.background = "pink";
});

password.addEventListener('blur', (event) => {
event.target.style.background = '';
password.addEventListener("blur", (event) => {
event.target.style.background = "";
});
```

Expand All @@ -73,29 +82,43 @@ password.addEventListener('blur', (event) => {

### イベント委譲

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

#### HTML

```html
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
<label>
テキストを入力:
<input type="text" placeholder="テキストを入力" />
</label>
<label>
パスワード:
<input type="password" placeholder="password" />
</label>
</form>
```

#### JavaScript

```js
const form = document.getElementById('form');

form.addEventListener('focus', (event) => {
event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', (event) => {
event.target.style.background = '';
}, true);
const form = document.getElementById("form");

form.addEventListener(
"focus",
(event) => {
event.target.style.background = "pink";
},
true,
);

form.addEventListener(
"blur",
(event) => {
event.target.style.background = "";
},
true,
);
```

#### 結果
Expand All @@ -110,9 +133,11 @@ form.addEventListener('blur', (event) => {

{{Compat}}

このイベントが処理されている間、 {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ([Firefox バグ 452307](https://bugzil.la/452307))。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。
このイベントが処理されている間、{{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ([Firefox バグ 452307](https://bugzil.la/452307))。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。

## 関連情報

- {{domxref("HTMLElement.blur()")}} メソッド
- 関連イベント: {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/focusin_event", "focusin")}}, {{domxref("Element/focusout_event", "focusout")}}
- `Window` を対象としたこのイベント: {{domxref("Window/blur_event", "blur")}} イベント
- [Focusing: focus/blur](https://javascript.info/focus-blur)
124 changes: 71 additions & 53 deletions files/ja/web/api/element/focus_event/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,41 @@
---
title: 'Element: focus イベント'
title: "Element: focus イベント"
short-title: focus
slug: Web/API/Element/focus_event
l10n:
sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
---

{{APIRef}}

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

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

<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/onfocus", "onfocus")}}
</td>
</tr>
<tr>
<th scope="row">同期 / 非同期</th>
<td>同期</td>
</tr>
<tr>
<th scope="row">Composed</th>
<td>はい</td>
</tr>
</tbody>
</table>
**`focus`** イベントは、要素がフォーカスを受け取ったときに発生します。このイベントはバブリングしませんが、その後に発生する関連する {{domxref("Element/focusin_event", "focusin")}} イベントはバブリングします。

`focus` の反対は {{domxref("Element/blur_event", "blur")}} であり、これは要素がフォーカスを失ったときに発生します。

`focus` イベントはキャンセル不可です。

## 構文

このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("focus", (event) => {});

onfocus = (event) => {};
```

## イベント型

{{domxref("FocusEvent")}} です。 {{domxref("Event")}} を継承しています。

{{InheritanceDiagram("FocusEvent")}}

## イベントプロパティ

_親である {{domxref("UIEvent")}} および間接的に {{domxref("Event")}} から継承したプロパティもあります_。

- {{domxref("FocusEvent.relatedTarget")}}
- : もしあれば、フォーカスを受け取った要素。

## 例

Expand All @@ -48,8 +45,14 @@ slug: Web/API/Element/focus_event

```html
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
<label>
テキストを入力:
<input type="text" placeholder="テキストを入力" />
</label>
<label>
パスワード:
<input type="password" placeholder="password" />
</label>
</form>
```

Expand All @@ -58,12 +61,12 @@ slug: Web/API/Element/focus_event
```js
const password = document.querySelector('input[type="password"]');

password.addEventListener('focus', (event) => {
event.target.style.background = 'pink';
password.addEventListener("focus", (event) => {
event.target.style.background = "pink";
});

password.addEventListener('blur', (event) => {
event.target.style.background = '';
password.addEventListener("blur", (event) => {
event.target.style.background = "";
});
```

Expand All @@ -73,29 +76,43 @@ password.addEventListener('blur', (event) => {

### イベント委譲

このイベントのイベント委譲を実装する方法は二つあります。 {{domxref("Element/focusin_event", "focusin")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} の `useCapture` 引数に `true` を設定するかです。
このイベントのイベント委譲を実装する方法は 2 つあります。 {{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">
<label>
テキストを入力:
<input type="text" placeholder="テキストを入力" />
</label>
<label>
パスワード:
<input type="password" placeholder="password" />
</label>
</form>
```

#### JavaScript

```js
const form = document.getElementById('form');

form.addEventListener('focus', (event) => {
event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', (event) => {
event.target.style.background = '';
}, true);
const form = document.getElementById("form");

form.addEventListener(
"focus",
(event) => {
event.target.style.background = "pink";
},
true,
);

form.addEventListener(
"blur",
(event) => {
event.target.style.background = "";
},
true,
);
```

#### 結果
Expand All @@ -112,6 +129,7 @@ form.addEventListener('blur', (event) => {

## 関連情報

- {{domxref("HTMLElement.focus()")}} メソッド
- 関連イベント: {{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)

0 comments on commit c312f99

Please sign in to comment.