[jQuery API] change() : selecbox 선택시 이벤트 발생
- 📕 Programing/Javascript
- 2013. 12. 3. 09:14
change
자바스크립트를 사용해 이벤트를 동작하기 위해서는 addEventListner() 라는 함수가 존재하는데 해당 함수를 jQuery를 사용하면 간단한 방법으로 이벤트를 제어할 수 있는데 대표적인, bind(), on(), 메소드 외에 change() 메소드에 대하여 알아보자.
change() 메소드는 해당하는 요소의 value에 변화가 생길 경우 이를 감지하여 등록된 콜백함수를 동작시킨다. 해당 코드는 input, textarea, select 태그에 동작한다. 그럼 간단한 예제를 통해 알아보자.
참고 URL : https://api.jquery.com/change/#change-handler
.change() | jQuery API Documentation
Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element. This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third. The change event is sent to
api.jquery.com
아래는 input 태그에 발생된 이벤트로 특정 함수가 동작하는 예제 소스이다.
예시
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#target').change(function(){
alert('Handler for .change() called.');
});
});
</script>
</head>
<body>
<select id="target" class="target">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</body>
</html>
selectbox의 값을 변경할 경우 콜백함수를 실행하여 alert('Handler for .change() called.'); 이벤트가 발생한다.
'📕 Programing > Javascript' 카테고리의 다른 글
| checkbox가 체크된 것만 가져오기 (0) | 2021.10.08 |
|---|---|
| [Javascript] JSON.stringify() / JSON.parse() (0) | 2021.10.04 |
| checkbox 활용법( 체크여부 확인 등) (0) | 2014.04.23 |
| json 예제소스 (0) | 2013.12.23 |
| json 이란? (0) | 2013.12.17 |