.change()
원문 링크 
http://api.jquery.com/change/
함수들
개요 : JavaScript 이벤트인 "change"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다.
- .change( handler(eventObject) )
- handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
- .change( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달될 데이터 집합.
- handler(eventObject) 매번 이벤트를 발생시키는 함수가 실행됩니다.
- .change( )
이 함수는 .bind('change', handler)을 줄여 놓은 것입니다. 그리고 .trigger('change') 로 change 이벤트를 발생시키기도 합니다.
change 이벤트는 요소(element)의 값이 변경될 때 발생합니다. 원래, 이 이벤트는 <input>, <textarea>, <select> 와 같은 폼 요소 전용이었습니다. select, checkbox, radio 버튼들을 마우스로 선택하여 상태값을 바꾸는 즉시 이벤트가 발생하지만, 그 외의 다른 요소들은 값을 변경하고 포커스를 잃을 때 이벤트가 발생합니다.
HTML을 보면
<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>text input 과 the select box에 이벤트를 바인딩 하겠습니다.
$('.target').change(function() {
alert('Handler for .change() called.');
});select의 값을 변경시키면 알림창이 뜹니다. text input에는 값을 바꾼 후 다른 곳을 클릭하면 알림창이 뜹니다. 만일 포커스의 이동없이 .change() 이벤트를 발생시키려면 아래 구문을 추가하시면 됩니다.
$('#other').click(function() {
$('.target').change();
});div인 Trigger the handler 를 클릭하면 메시지가 나타나게 됩니다. 이때 메시지는 2번 나타나는데 change 클래스를 가진 폼 요소가 2개이기 때문입니다.
예 제
select에서 선택한 값들을 div에 표시합니다. ctrl + click으로 다중 선택해보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>
</body>
</html>미리보기
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - die(), 이벤트 해제하기 (2) | 2011.12.08 |
|---|---|
| jQuery API 정복 - delegate(), 이벤트 바인딩하기 (1) | 2011.12.08 |
| jQuery API 정복 - 더블클릭 이벤트, dblclick() (4) | 2011.11.25 |
| jQuery API 정복 - 클릭 이벤트, click() (0) | 2011.11.25 |
| jQuery API 정복 - 포커스 잃을 때 이벤트, blur() (1) | 2011.11.24 |
| jQuery API 정복 - 이벤트 연결하기, bind() (6) | 2011.11.23 |
| jQuery API 정복 - 요소 별로 감싸기, wrapAll() (0) | 2011.11.22 |
| jQuery API 정복 - 넓이 구하기, width() (0) | 2011.11.22 |