Home > Web Front-end > JS Tutorial > body text

About the performance and solution of onchange event under IE and FF_javascript skills

WBOY
Release: 2016-05-16 16:56:21
Original
1154 people have browsed it

In a recent project, there is such a feature: there is a checkbox on the page. When the user selects or deselects the checkbox, a jsonp request will be sent to the background. The implementation at that time was to add an onchange event to this checkbox, but the result was unexpected. For this reason, I conducted an in-depth study and found that the onchange event had the following problems in its performance under IE and FF.

Problem ①: In FF, when the selected state of the checkbox is changed, the onchange event will be triggered immediately. However, when changing the selected status of the checkbox under IE, the onchange event will not be triggered immediately. Instead, the event will be triggered after the checkbox loses focus.

In order to solve this problem, I added this.blur() statement in the onclick event of the checkbox. This is because the onclick event is executed before the onchange event, so I added this.blur() in the Onclick event. When the checkbox loses focus, the onchange event will be fired immediately. But then, we encountered a second problem.

Problem ②: When the onclick event and this.blur are used at the same time, an error will be reported under IE.

I searched for some information on the Internet and finally found the onpropertychange event. This event will not be triggered under FF. Under IE, it will start immediately when the selection status of the checkbox changes. Therefore, the final solution was reached: under IE, bind the onpropertychange event to the checkbox, and under FF, bind the onchange event to it.

The specific code implementation is as follows:

Copy code The code is as follows:

var ua=navigator .userAgent.toLowerCase();
var s=null;
var browser={
msie:(s=ua.match(/msies*([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){/ /If it is IE browser
checkbox.onpropertychange=function(){
//do someting
}
}
else{
checkbox.onchange=function(){
//do something
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!