onchange 이벤트 예제

Posted on

팁: 이 이벤트는 입력 된 이벤트와 유사합니다. 차이점은 온입력 이벤트가 요소의 값이 변경된 직후에 발생하지만, 콘텐츠가 변경된 후 요소가 포커스를 잃을 때 onchange가 발생한다는 점입니다. 다른 차이점은 onchange 이벤트가 요소에서도 작동한다는 것입니다. jQuery 1.4에서 인터넷 익스플로러의 변경 이벤트는 다른 최신 브라우저에서 이벤트와 일관되게 방식으로 진행됩니다. countryChange() 함수는 대륙 선택 요소의 onchange 이벤트에 의해 호출됩니다. 라디오 단추 및 확인란의 경우 선택된 상태가 변경되었을 때 onchange 이벤트가 발생합니다. 참고: oninput과 달리 onchange 이벤트 처리기가 요소 값에 대한 각 변경에 반드시 호출되는 것은 아닙니다. 이 기술의 목적은 선택 요소와 함께 onchange 이벤트를 올바르게 사용하여 웹 페이지의 다른 요소를 업데이트하는 방법을 보여 주는 것입니다. 이 기술은 컨텍스트를 변경하지 않습니다.

웹 페이지에 하나 이상의 선택 요소가 있는 경우 하나에 onchange 이벤트가 있으면 웹 페이지의 다른 선택 요소에서 옵션을 업데이트할 수 있습니다. 선택 요소에 필요한 모든 데이터는 웹 페이지에 포함됩니다. 참고: 예를 들어 .val()를 사용하여 JavaScript를 사용하여 입력 요소의 값을 변경하면 이벤트가 발생하지 않습니다. 이 코드가 실행되면 처리기 트리거를 클릭하면 메시지에 대해서도 경고합니다. 처리기가 두 양식 요소 모두에서 변경 이벤트에 바인딩되었기 때문에 메시지가 두 번 표시됩니다. 선택한 각 옵션에 대한 텍스트를 가져옵니다 div에 기록하는 선택 이벤트에 변경 이벤트를 연결합니다. 그런 다음 초기 텍스트 그리기에 대한 이벤트를 트리거합니다. 사용자가 양식 컨트롤에 값 변경을 커밋하면 이벤트가 발생합니다. 예를 들어 컨트롤 외부를 클릭하거나 Tab 키를 사용하여 다른 컨트롤로 전환하여 이 작업을 수행할 수 있습니다.

이 예제에는 두 개의 선택 요소가 포함되어 있습니다. 첫 번째 선택에서 항목을 선택하면 다른 선택 항목의 선택 항목이 적절하게 업데이트됩니다. 첫 번째 선택 요소에는 대륙 목록이 포함되어 있습니다. 두 번째 선택 요소에는 선택한 대륙에 있는 국가의 일부 목록이 포함됩니다. 대륙 선택과 관련된 변경 이벤트가 있습니다. 대륙 선택이 변경되면 선택한 국가의 항목은 문서 개체 모델(DOM)을 통해 JavaScript를 사용하여 수정됩니다. 필요한 모든 데이터( 국가 및 대륙 목록)는 웹 페이지에 포함됩니다. 변경 이벤트는 값이 변경될 때 요소로 전송됩니다.