IE 및 FF_javascript 기술에서 onchange 이벤트의 성능 및 솔루션 정보

최근 프로젝트에는 다음과 같은 기능이 있습니다. 사용자가 확인란을 선택하거나 선택 취소하면 jsonp 요청이 백그라운드로 전송됩니다. 당시 구현은 이 체크박스에 onchange 이벤트를 추가하는 것이었지만 결과는 의외였습니다. 이러한 이유로 심층 연구를 진행한 결과 IE 및 FF에서 onchange 이벤트의 성능에 다음과 같은 문제가 있음을 발견했습니다.

문제 ①: FF에서는 체크박스의 선택된 상태가 변경되면 즉시 onchange 이벤트가 발생합니다. 그러나 IE에서 체크박스의 선택된 상태를 변경하면 onchange 이벤트가 즉시 발생하지 않고, 체크박스가 포커스를 잃은 후에 이벤트가 발생합니다.

이 문제를 해결하기 위해 체크박스의 onclick 이벤트에 this.blur() 문을 추가했습니다. 이는 onchange 이벤트 전에 onclick 이벤트가 실행되기 때문이므로 Onclick에 this.blur()를 추가했습니다. 확인란이 포커스를 잃으면 onchange 이벤트가 즉시 시작됩니다. 그런데 두 번째 문제가 발생했습니다.

문제2: onclick 이벤트와 this.blur를 동시에 사용하면 IE에서 오류가 보고됩니다.

인터넷에서 몇 가지 정보를 검색하다가 마침내 onpropertychange 이벤트를 발견했습니다. 이 이벤트는 FF에서는 트리거되지 않습니다. IE에서는 체크박스의 선택 상태가 변경되면 즉시 시작됩니다. 따라서 최종 솔루션에 도달했습니다. IE에서는 onpropertychange 이벤트를 확인란에 바인딩하고 FF에서는 onchange 이벤트를 확인란에 바인딩합니다.

구체적인 코드 구현은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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){/ /IE 브라우저인 경우
checkbox.onpropertychange=function(){
//뭔가를 하세요
}
}
else{
checkbox.onchange= function(){
//뭔가를 하세요
}
}