web-dev-qa-db-ja.com

チェックボックスの.clickと.changeの違い

イベントをチェックボックスに追加するために周りを見回していたので、人々は.change変更イベントを設定しますが、代わりに人々が.click

これには理由がありますか？どちらも、クリックされたイベントとキーボードの変更の両方で正常に動作するようです。何か不足していますか？

もしあなたが私を信じないなら自分で試してみてください

javascriptjquerycheckboxclick
37
qwertymk

onchange in IEは、チェックボックスがフォーカスを失ったときにのみ起動します。そのため、タブで移動し、スペースを数回押し、タブアウトすると、1つだけonchangeイベント、ただしいくつかのonclickイベント。

注：これは、IEの動作が（仕様に従って）正しく、他のブラウザーが間違っている非常にまれな時間の1つです。

38
Mark Kahn

onclickよりもonchangeが好まれる2つの理由。

  1. Internet Explorerは、チェックボックスがフォーカス（onblur）を失ったときにのみonchangeイベントを発生させます。したがって、onclickは、クロスブラウザーソリューションに近いものです。

  2. onchangeは、要素がフォーカスを失った後にのみ発生します（アラートを呼び出し、すべての変更にフォーカスを失っているため、違いは見られません）。 MDCの擬似コードは element.onchange 実装。

    control.onfocus = focus;
control.onblur = blur;

function focus () {
    original_value = control.value;
}

function blur () {
    if (control.value != original_value)
        control.onchange();
}
6
naveen

.changeは、キーの変更（ユーザーが上/下矢印キーを使用してオプションを選択する）に関連して、少なくとも一部の一般的なブラウザーでは正しく動作しませんが、.clickはこれを克服しません。この問題を克服するために、キーアップやキーダウンなどを.changeと組み合わせて使用​​することがありますが、コールバック内で明示的に処理されていない場合、キーイベントをトリガーする可能性があるため、ユーザーがドキュメントをタブで移動すると少し混乱し始めます。全体として、.changeが時間のかかる問題を解決するため、期待どおりに機能しないのは残念です。

0
Rob

はい、両方とも機能します。クリックのみが、実際のオブジェクトの変更（チェックされるチェックボックスなど）を見るのではなく、変更が行われます。

技術的にはより信頼性がありますが、実際には両方が機能します。

0
cmplieger

これらは両方ともデフォルトで値の変更を発生させることがありますが、onClickロジックをオーバーライドして、Chackboxの値を変更しないようにすることができます。別のエントリポイントを介して値を変更できます。したがって、.clickと.changeが必要です。

編集-ロブ博士にも同意します

0
IEnumerable