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 이벤트를 확인란에 바인딩합니다.

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