最近のプロジェクトでは、ページ上にチェックボックスがあり、ユーザーがチェックボックスを選択または選択解除すると、jsonp リクエストがバックグラウンドに送信されます。当時の実装では、このチェックボックスに onchange イベントを追加するという想定外の結果が得られました。そのため、詳しく調査したところ、IE および FF での onchange イベントのパフォーマンスに次のような問題があることがわかりました。
質問①: FF では、チェックボックスの選択状態が変更されると、すぐに onchange イベントがトリガーされます。ただし、IE でチェックボックスの選択状態を変更する場合、onchange イベントはすぐにはトリガーされず、チェックボックスがフォーカスを失った後にイベントがトリガーされます。
この問題を解決するために、チェックボックスの onclick イベントに this.blur() ステートメントを追加しました。 これは、onclick イベントが onchange イベントよりも前に実行されるため、onclick イベントに this.blur() ステートメントを追加すると、チェックボックスが発生します。フォーカスはすぐに onchange イベントを起動します。しかしその後、2 つ目の問題が発生しました。
問題点②： onclickイベントとthis.blurを同時に使用するとIEでエラーが報告されます。
インターネットで情報を検索した結果、ついに onpropertychange イベントを発見しました。このイベントは FF ではトリガーされません。 IEではチェックボックスの選択状態が変わるとすぐに起動します。したがって、最終的な解決策に到達しました。IE では onpropertychange イベントをチェックボックスにバインドし、FF では onchange イベントをチェックボックスにバインドします。
具体的なコードの実装は次のとおりです。
次のようにコードをコピーします。
var ua=navigator.userAgent.toLowerCase();
vars=null;
var ブラウザ={
msie:(s=ua.match(/msie/s*([/d/.]+)/))?s[1]:false,
Firefox:(s=ua.match(/firefox//([/d/.]+)/))?s[1]:false,
chrome:(s=ua.match(/chrome//([/d/.]+)/))?s[1]:false,
opera:(s=ua.match(/opera.([/d/.]+)/))?s[1]:false,
safari:(s=ua.match(/varsion//([/d/.]+).*safari/))?s[1]:false
};
if(browser.msie){//IE ブラウザの場合
checkbox.onpropertychange=function(){
//何かをする
}
}
それ以外{
checkbox.onchange=function(){
//何かをする
}
}