checkbox를 다룰때 click 이벤트와 change 이벤트 중 어떤 것을 사용해야 할지 고민할 때가 종종있다.
jQuery를 이용하여 checkbox나 radio 버튼을 다룰 때
click 이벤트와 change 이벤트 중 어떤 것을 사용해야 할지 고민할 때가 가끔있다.
사소한 것이라 매번 확인하고 그냥 지나치고, 다음에 또 찾아보고...
그래서 이번에는 꼭 기억하기 위해 주저리주저리 적어본다.
(자꾸 이야기 하면서 적다보면 머리에 남지 않을까?)
예제라도 만들어서 정상스럽게 포스팅하고 싶지만,
간단히 검색만 해도 관련된 내용은 많이 찾을 수 있다.
그중에서 하나를 소개하면...
checkbox의 click 이벤트와 change 이벤트의 차이점에 대해 묻고 있는데,
예제 소스까지 보여주면서 친절히 설명하고 있다.
영어로 설명된거 다 볼 필요는 없고
아래 예제만 보면 대충 이해할 수 있다.
위 주소에서 예제를 확인하면
HTML, JAVASCRIPT, CSS 그리고 결과 화면도 확인이 가능하다.
아래와 같은 실행화면을 보면서
직접 테스트를 진행해 볼 수 있다.
먼저 checkbox 를 클릭하면
아래 사각 박스의 배경색이 변경되는 것을 확인할 수 있다.
다음 jQuery의 .prop()를 실행한 결과다.
$(...).prop('checked', true), $(...).prop('checked', false)를
실행한 결과에서는 checkbox만 check 되고
아래 사각 박스의 배경색은 변화가 없다.
즉, prop('checked', ture|false)를 실행한 경우
checkbox의 change나 click 이벤트는 발생하지 않는다.
이번에는 jQuery의 trigger를 이용하여
checkbox의 change 이벤트를 발생한 결과다.
checkbox의 change 이벤트 때문에
change 사각 박스의 배경색은 변경 되었지만,
click 사각 박스의 배경색은 변경되지 않았다.
여기까지는 예상한 결과인데,
실제 checkbox도 check가 되지 않았다.
즉, jQuery의 trigger를 이용하여 change 이벤트를 발생한 경우
checkbox의 check에는 변화가 없다.
마지막으로 jQuery의 trigger를 이용하여
checkbox의 click 이벤트를 발생한 결과다.
change 이벤트와는 다르게
두 사각 박스 모두 반응이 된다.
그리고, checkbox의 check도 변경이 되었다.
즉, jQuery의 trigger를 이용하여 click 이벤트를 발생한 경우,
checkbox의 click, change 이벤트 리스너가 모두 반응하고
checkbox의 check도 변경된다.
추가로 키보드를 통한 접근(체크)에서도
checkbox의 click 이벤트가 발생한다.