Cодержание
Руководство Javascript ChangeEvent
View more Tutorials:
Событие change происходит в следующих случаях:
- Пользователь check/uncheck trên <input type="checkbox">.
- Пользователь меняет на <input type="radio">.
- Пользователь меняет значение у <input> (file, color, range).
- Пользователь меняет содержание у <input> ( text, number, email, password, tel, time, week, month, date, datetime-local, search, url), потом focus на другое место.
- Пользователь меняет содержание у <textarea>, потом focus на другое место.
- Пользователь меняет опцию (option) на элементе <select>.
ChangeEvent наследует все свойства (property) и метод интерфейса Event.
Пример с событием change:
changeevents-elements-example.html
<!DOCTYPE html>
<html>
<head>
<title>ChangeEvent Example</title>
<meta charset="UTF-8">
<style>.title {font-weight:bold;}</style>
<script>
function changeHandler(evt) {
alert("Changed!");
}
</script>
</head>
<body>
<h2>ChangeEvent example</h2>
<p class="title">Input (checkbox, radio):</p>
<input type="checkbox" onchange ="changeHandler(event)"/>
<input type="radio" name ="gender" value="M" onchange ="changeHandler(event)"/>
<input type="radio" name ="gender" value="F" onchange ="changeHandler(event)"/>
<p class="title">Input (range):</p>
<input type="range" min ="1" max="10" onchange ="changeHandler(event)"/>
<p class="title">Input (color):</p>
<input type="color" onchange ="changeHandler(event)"/>
<p class="title">Input (file):</p>
<input type="file" onchange ="changeHandler(event)"/>
<p class="title">Input (image, hidden, buton, submit, reset):</p>
- (Not support 'change' event)
<p class="title">Input (text, number, email, password, tel, time, week, month, date, datetime-local, search, url):</p>
<input type="text" onchange ="changeHandler(event)"/>
<p class="title">Textarea element</p>
<textarea onchange ="changeHandler(event)" rows="3" cols="30"></textarea>
<p class="title">Select:</p>
<select onchange ="changeHandler(event)">
<option value ="en">English</option>
<option value ="de">German</option>
<option value ="vi">Vietnamese</option>
</select>
<p id="log-div"></p>
</body>
</html>
Пример с событием change на элементе <select>:
changeevents-select-example.html
<!DOCTYPE html>
<html>
<head>
<title>ChangeEvent Example</title>
<meta charset="UTF-8">
<script>
function changeHandler(evt) {
alert("Language: " + evt.target.value);
}
</script>
</head>
<body>
<h2>ChangeEvent example</h2>
<p class="title">Select Language:</p>
<select onchange ="changeHandler(event)">
<option value ="en">English</option>
<option value ="de">German</option>
<option value ="vi">Vietnamese</option>
</select>
</body>
</html>
Event: change vs input
Вы можете рассмотреть возможность использования события input , потому что оно очень похоже на событие change:
- Событие input происходит сразу после того, как меняется значение элемента, не требует того, чтобы элемент терял focus.
- Событие input поддерживает элементы с атрибутом (attribute) contenteditable="true". В то время, как change поддерживает только элементы <input>, <texarea>, <select>.
