trigger() vs prop() ? select
안녕하세요.
고코더 입니다.
자바스크립트로 셀렉트 박스를 선택을 변경하는 개발을 할때 유의할 점이 있습니다. 지난 시간에 prop()과 trigger()을 각각 이용하여 셀렉트 박스의 옵션을 변경하는 방법을 배워 봤는데요.
이번 시간에는 이 두개의 차이점을 설명하려고 합니다.
● 1. trigger vs prop
각 함수로 select 박스 옵션을 변경할때 용도를 정리해보겠습니다.
tirigger() : 사용자가 셀렉트 박스를 변경할때와 같이 이벤트를 발생시키고 싶을때
prop() : 사용자에게 화면에만 해당 옵션을 보여줄때 이벤트가 발생하지 않음
셀렉트 박스에서 chage 이벤트가 있다면 트리거를 사용해야 하며 그저 상태값만 이동 시키고 싶다면 prop을 이용합니다.
● 2. 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function triggerChagne(){ $("#gocoder").val('g').trigger('change'); } function propChagne(){ $("#gocoder").val("c").prop("selected", true); } function Chagne(){ alert("변경됨"); } </script> </head> <body> <select id="gocoder" onchange="Chagne()"> <option value="">셀렉트박스 선택</option> <option value="g">Go</option> <option value="c">Coder</option> </select> <input type="button" onclick="triggerChagne();" value="trigger 셀렉트 박스 선택" /> <input type="button" onclick="propChagne();" value="pro 셀렉트 박스 선택" /> </body> </html> | cs |
예제에는 select 박스에 변화가 일어나면 이벤트를 발생시킬 수 있도록 change() 이벤트를 주었습니다.
tirgger 버튼을 누르면 change() 이벤트가 발생하여 경고창이 발생합니다.
하지만 pro 버턴은 그저 셀렉트 박스 변경만 일어나고 change() 옵션을 체크하지 못합니다.
마무리
차이점이 후배님 명확하죠?
(후배가 물어봐서 글을 남겼습니다.)
'IT_Developers > Javascript' 카테고리의 다른 글
| JavaScript - 배열에 값을 추가/ unshift(), push() (0) | 2019.10.21 |
|---|---|
| JavaScript - 문자열 맨 뒷자리 잘라내기 / slice를 이용한 쉬운 방법 (0) | 2019.10.21 |
| jQuery - prop()으로 select 상태 값 변경 (0) | 2019.10.17 |
| jQuery - trigger()로 select 박스 선택 값 변경하기 (0) | 2019.10.17 |
| jQuery - 가장 간단한 슬라이드 HTML / Coin Slider (2) | 2019.07.17 |
댓글