Performance and solution of onchange events in IE and FF

In a recent project, there is a function: There is a checkbox on the page. When the user selects or cancels the checkbox, A jsonp request is sent to the backend. At that time, the implementation was to add an onchange event for this checkbox, but the results were unexpected. For this reason, I have studied it in depth, the following problems exist in the performance of the onchange event in IE and FF.

Question ①:In FF, The onchange event is triggered immediately when the checkbox is selected. However, when I change the checkbox selected status in IE, The onchange event will not be started immediately. Instead, the event will start only when the checbox loses focus.

To solve this problem, I added this in The onclick event of the checkbox. blur (), because the onclick event is executed before the onchange event, so add this in The Onclick event. blur () causes the checkbox to lose focus and the onchange event will be triggered immediately. However, the second problem is encountered.

Question ②:When the onclick event and this. blur are both used, an error is reported in IE.

I found some information on the Internet and finally found the onpropertychange event. This event will not be triggered in FF. In IE, when the checkbox selection status changes, it will start immediately. Therefore, the final solution is obtained: in IE, bind the onpropertychange event to the checkbox, and in FF, bind the onchange event to it.

The Code is as follows:
Copy codeThe Code is as follows:
Var ua = navigator. userAgent. toLowerCase ();
Var s = null;
Var browser = {
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) {// for IE browser
Checkbox. onpropertychange = function (){
// Do someting
}
}
Else {
Checkbox. onchange = function (){
// Do something
}
}