argius note

プログラミング関連

IEのonchangeは使いにくい

IE5で既にこういう挙動なので、今更な話ではあります。


IEで、コントロールの入力値が変更されたときのイベントを捕捉したい。で、onchangeを使ったはいいのですが、radioとcheckboxの場合はクリックされてもイベントが発火しない。どうやら、IEではフォーカスを失ったときにonchangeイベントが発火するようです。
IE5.5、IE6、IE7で確認。Firefox3では、クリックした瞬間にイベントが発火します。

<form name="f">
<input type="radio" name="r" value="0">
<input type="radio" name="r" value="1"><br>
<input type="checkbox" name="c" value="0">
<input type="checkbox" name="c" value="1"><br>
</form>
<script language="javascript"><!--
var elements = document.f.elements;
for (var i = 0; i < elements.length; i++) {
    var o = elements[i];
    switch (o.type) {
        case "radio":
        case "checkbox":
            o.onchange = function() {
                alert("changed");
            }
            break;
    }
}
//--></script>

回避するには、onclick時に強制的にフォーカスを外してあげます。最善策かどうかは分かりませんけどね。

for (var i = 0; i < elements.length; i++) {
    var o = elements[i];
    switch (o.type) {
        case "radio":
        case "checkbox":
            o.onchange = function() {
                alert("changed");
            }
            o.onclick = function() {
                this.blur();
            }
            break;
    }
}