최근 프로젝트에는 다음과 같은 기능적 점이 있습니다. 사용자가 확인란을 선택하거나 선택 취소하면 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();
변수=널;
var 브라우저={
msie:(s=ua.match(/msie/s*([/d/.]+)/))?s[1]:false,
firefox:(s=ua.match(/firefox//([/d/.]+)/))?s[1]:false,
크롬:(s=ua.match(/chrome//([/d/.]+)/))?s[1]:false,
Opera:(s=ua.match(/opera.([/d/.]+)/))?s[1]:false,
사파리:(s=ua.match(/varsion//([/d/.]+).*safari/))?s[1]:false
};
if(browser.msie){//IE 브라우저인 경우
checkbox.onpropertychange=함수(){
//뭔가를 해라
}
}
또 다른{
checkbox.onchange=함수(){
//뭔가를 해라
}
}