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() 옵션을 체크하지 못합니다.


마무리


차이점이 후배님 명확하죠?
(후배가 물어봐서 글을 남겼습니다.)

댓글을 달아 주세요


prop()을 사용해 select 상태만 변경하기


안녕하세요.
고코더 입니다.



이번 시간에는 prop으로 셀렉트 박스의 상태 값을 변경하는 방법을 알아보겠습니다.
트리거는 사용자의 이벤트를 대신하는 느낌이라면 
prop은 현재의 화면에 보여주는 옵션 상태 값을 변경 합니다. 
가장 큰 차이는 change() 값에 바인딩 되지 않습니다

 1. 아래 소스를 한번 웹에서 보겠습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function propChagne(){
    $("#gocoder").val("c").prop("selected"true);
}
 
</script>
</head>
<body>
 
     <select id="gocoder">
        <option value="">셀렉트박스 선택</option>
        <option value="g">Go</option>
        <option value="c">Coder</option>
     </select>
 
    <input type="button" onclick="propChagne();" value="pro 셀렉트 박스 선택"  />
      
</body>
</html>
cs

gocoder_propSelect.html


 2. 해당 파일을 웹에서 실행하신 다음 버튼을 클릭 합니다. 

 3. 그러면 왼쪽에 셀렉트 박스가 변경되어 있는걸 확인할 수 있습니다.  prop으로 할경우 방문자에게 특정 셀렉트 박스를 보여주고 싶지만 이벤트 발생이 되지 않을때 사용하면 좋습니다.


마무리


이벤트 종류가 많은 이유가 있습니다.

댓글을 달아 주세요