<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
Как я могу определить новое состояние флажка из onClickHandler
и/или onChangeHandler
?
Короткий ответ:
Используйте событие click
, которое срабатывает только после обновления значения и срабатывает тогда, когда вы этого хотите:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
Длинный ответ:
Обработчик события change
вызывается только после обновления состояния checked
(живой пример | источник), но поскольку (как отмечает Tim Büthe в комментариях) IE не запускает событие change
, пока флажок не потеряет фокус, вы не получите уведомление заранее. Хуже того, в IE, если вы нажмете на ярлык флажка (а не на сам флажок), чтобы обновить его, может создаться впечатление, что вы получите старое значение (попробуйте сделать это в IE здесь, нажав на ярлык: живой пример | источник). Это происходит потому, что если флажок имеет фокус, щелчок по метке отвлекает фокус от него, вызывая событие change
со старым значением, а затем происходит click
, устанавливающий новое значение и возвращающий фокус обратно на флажок. Очень запутанно.
Но вы можете избежать всех этих неприятностей, если вместо этого будете использовать click
.
Я'использовал обработчики DOM0 (атрибуты onxyz
), потому что вы спрашивали именно об этом, но для протокола, я бы вообще рекомендовал подключать обработчики в коде (DOM2's addEventListener
, или attachEvent
в старых версиях IE), а не использовать атрибуты onxyz
. Это позволит вам прикрепить несколько обработчиков к одному и тому же элементу и позволит вам избежать создания глобальных функций для всех ваших обработчиков.
В предыдущей версии этого ответа использовался этот код для handleClick
:
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
Цель, похоже, заключалась в том, чтобы позволить щелчку завершиться, прежде чем посмотреть значение. Насколько я знаю, для этого нет причин, и я понятия не имею, почему я так сделал. Значение изменяется до вызова обработчика click
. На самом деле, в спецификации довольно ясно сказано об этом. Версия без setTimeout
прекрасно работает во всех браузерах, которые я пробовал (даже в IE6). Я могу только предположить, что я думал о какой-то другой платформе, где изменение происходит только после события. В любом случае, нет причин делать это с HTML флажками.
Для React.js вы можете сделать это с помощью более читабельного кода. Надеюсь, это поможет.
handleCheckboxChange(e) {
console.log('value of checkbox : ', e.target.checked);
}
render() {
return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}