1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: 'HTMLElement: change イベント'
slug: Web/API/HTMLElement/change_event
tags:
- Change
- Event
- HTML
- HTML DOM
- HTMLElement
- Reference
- Web
translation_of: Web/API/HTMLElement/change_event
---
<div>{{APIRef}}</div>
<p><code>change</code> イベントは {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素において、ユーザーによる要素の値の変更が確定したときに発生します。 {{domxref("HTMLElement/input_event", "input")}} イベントとは異なり、 <code>change</code> イベントは要素の値 (<code>value</code>) が変更されるたびに発生するとは限りません。</p>
<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("Event")}}</td>
</tr>
<tr>
<th scope="row">イベントハンドラープロパティ</th>
<td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td>
</tr>
</tbody>
</table>
<p>変更される要素の種類やユーザーが要素を操作する方法によって、 <code>change</code> イベントは異なる時点で発生します。</p>
<ul>
<li><code>{{HTMLElement('input/radio', '<input type="radio">')}}</code> および <code>{{HTMLElement('input/checkbox', '<input type="checkbox">')}}</code> の場合は、 (クリックまたはキーボードを使用して) 要素が <code>:checked</code> になったとき。</li>
<li>ユーザが明示的に変更を確定したとき (たとえば、 {{HTMLElement("select")}} のドロップダウンの値をマウスクリックで選択した場合、 <code>{{HTMLElement('input/date', '<input type="date">')}}</code> の日付ピッカーで日付を選択した場合、 <code>{{HTMLElement('input/file', '<input type="file">')}}</code> のファイル選択ダイアログでファイルを選択した場合など)。</li>
<li>要素の値が変更されたが、確定しないうちに要素がフォーカスを失ったとき (たとえば、 {{HTMLElement("textarea")}} または <code>{{HTMLElement('input/text', '<input type="text">')}}</code> の値を編集した後に、要素がフォーカスを失った場合)。</li>
</ul>
<p>HTML 仕様書には、 <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply"><code>change</code> イベントを発生させる <code><input></code> 型</a>の一覧があります。</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="<select>_element" name="<select>_element"><select> 要素</h3>
<div id="select-example">
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><label>アイスクリームの味:
<select class="ice-cream" name="ice-cream">
<option value="">1つ選択してください …</option>
<option value="chocolate">チョコレート</option>
<option value="sardine">イワシ</option>
<option value="vanilla">バニラ</option>
</select>
</label>
<div class="result"></div></pre>
<div class="hidden">
<pre class="brush: css notranslate">body {
display: grid;
grid-template-areas: "select result";
}
select {
grid-area: select;
}
.result {
grid-area: result;
}
</pre>
</div>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js notranslate">const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
</pre>
</div>
<h4 id="Result" name="Result">結果</h4>
<p>{{ EmbedLiveSample('select-example', '100%', '75px') }}</p>
<h3 id="Text_input_element" name="Text_input_element">テキスト入力要素</h3>
<p><code><input type="text"></code> など一部の要素では、コントロールがフォーカスを失うまで <code>change</code> イベントが発生しません。以下のフィールドに何かを入力してから、他の部分をクリックするとイベントが発生します。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><input placeholder="何かテキストを入力" name="name"/>
<p id="log"></p></pre>
<h4 id="JavaScript_2">JavaScript</h4>
<pre class="brush: js notranslate">const input = document.querySelector('input');
const log = document.getElementById('log');
input.addEventListener('change', updateValue);
function updateValue(e) {
log.textContent = e.srcElement.value;
}</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.HTMLElement.change_event")}}</p>
<p>すべてのブラウザーにおいて、特定の操作で <code>change</code> イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では {{HTMLElement("select")}} 要素をキーボードで操作すると、 <code>change</code> イベントは Enter を押すか <code><select></code> からフォーカスが離れるまで発生しませんでした ({{bug("126379")}} を参照)。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
|
