Для onchange
поведение зависит от браузера: в IE (даже в IE8) обработчик onchange срабатывает только после того, как флажок теряет фокус (то есть, если проверенное состояние было изменено).
Это поведение действует даже при программной установке контрольного состояния. Тем не менее, как правило, вы не заметите это, так как на коробке изначально не было фокуса. Но если у вашего флажка был фокус, вы можете изменить контрольное состояние программно, а затем у кода будет побочный эффект размытия флажка, onchange
все равно будет срабатывать.
В chrome, firefox и opera обработчик onchange появляется сразу после того, как пользователь меняет проверенное состояние. При установлении проверенного состояния программно обработчик onchange никогда не запускается в этих браузерах.
Я согласен с Пойнти, что onclick
- лучший способ обрабатывать флажки, если вы хотите избежать неожиданностей. Насколько я вижу, onclick
срабатывает сразу после того, как пользователь щелкнет по нему, или переключит флажок с помощью клавиатуры. Поведение выглядит одинаково во всех упомянутых основных браузерах.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>checkboxes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
</head>
<body>
chk1: <input id="chk1" type="checkbox"
onclick="alert('chk1 clicked')"
onchange="foo1(this);" /> click me, then click somewhere on the page to blur this
<br/>
chk2: <input id="chk2" type="checkbox" onchange="foo2(this);" />
<br/>
<button onclick="toggleCheck(this)">push me to toggle chk2 programatically</button>
<script>
function foo1(chk){ alert("chk1 was changed"); }
function foo2(chk){ alert("chk2 was changed"); }
function toggleCheck(button){
var chk2 = document.getElementById("chk2");
chk2.focus();
chk2.checked = !chk2.checked;
alert("chk2 is now toggeled, but onchange handler didn't fire yet."+
"\nbut if you hit tab right after closing this alert, "+
"chk2 will lose its focus and still fire the onchange handler in IE.");
}
</script>
</body>
</html>