(1) change() 이벤트 메서드
- 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 발생함.
- 주로 폼 요소에 입력된 새 값을 스크립트에 이용할 때 사용됨.
- 또는 change 이벤트를 강제로 발생시킬 수 있음.
- 기본형
|
1. $(요소 선택).change(function() {...}); // 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 이벤트 핸들러에 있는 실행문을 실행함. 2. $(요소 선택).change(); // 선택한 요소에 강제로 change 이벤트 메서드를 발생시킴. |
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!-- 문단 태그 영역 -->
<body>
<select id="rel_site">
<option value="">사이트 선택</option>
<option value="www.naver.com">네이버</option>
<option value="www.nate.com">네이트</option>
<option value="www.daum.net">다음</option>
</select>
<p id="txt"></p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#rel_site").change(function(){ // id="rel_site"인 요소의 value 속성값이 바뀌었을 때 function(){...}에 실행문을 실행함.
$("#txt").text($(this).val()); // id="rel_site"인 요소의 value 속성값을 가져와 id="txt"인 요소에 텍스트로 출력
});
});
</script> |
cs |
(2) scroll() 이벤트 메서드
- 브라우저에 스크롤바가 이동할 때마다 이벤트를 발생시킴.
- 또는 scroll 이벤트를 강제로 발생시킴.
- 주로 퀵 메뉴를 만들 때 사용함.
- 기본형
|
1. $(요소 선택).scroll(function(){...}); // 브라우저에 스크롤바가 이동될 때마다 이벤트 핸들러에 있는 실행문이 실행됨. 2. $(요소 선택).scroll(); // 선택 요소에 강제로 scroll 이벤트를 발생시킴. |
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!-- 문단 태그 영역 -->
<style type="text/css">
body{height:3000px;}
#txt{position:fixed;top:10px;left:10px;}
</style>
<body>
<p id="txt"></p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(window).scroll(function(){ // 스크롤바가 이동할 때마다
$("#txt").text($(this).scrollTop()); // 브라우저에 스크롤바가 이동된 높잇값을 id="txt"인 요소에 텍스트로 출력
});
</script> |
cs |
* 이벤트가 발생한 요소 추적하기
(1) $(this) 선택자
- 이벤트 핸들러에 $(this)를 사용했다면, 여기서 $(this)가 가리키는 것은 이벤트가 등록된 요소를 가리킴.
- $(this) 선택자는 이벤트가 발생한 요소를 선택해 옴.
- $(this) 선택자를 이벤트 핸들러에 사용한 기본형
|
$(요소 선택).이벤트(function(){ $(this) }); |
- 예1)
|
<p><a href="#" id="btn">버튼</a></p>
$("#btn").click(function(){ $(this).css("color", "red"); // <a id="btn">을 클릭할 때마다 $(this)는 클릭 이벤트가 발생된 <a id="btn"> 태그를 가리킴 }); |
- 예2)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!-- 문단 태그 영역 -->
<body>
<button id="btn">마우스 오버</button>
</body>
<!-- $(this) 적용 -->
<script type="text/javascript">
$(function(){
$("#btn").mouseover(function(){ // 버튼에 마우스를 올릴 때마다
$(this).css("border", "2px solid red"); // 버튼에 선을 생성함.
$(this).text("MouseOver"); // 버튼의 텍스트를 "MouseOver"로 바꿈;
});
});
</script> |
cs |
(2) index() 인덱스 반환 메서드
- 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환함.
- 기본형
|
$(요소 선택).이벤트(function(){ $(요소 선택).index(this); // 이벤트를 등록한 요소 중에 이벤트가 발생한 요소의 인덱스 값을 반환함. }); |
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<body>
<ul id="menu">
<li><a href="#">내용1</a></li>
<li><a href="#">내용2</a></li>
<li><a href="#">내용3</a></li>
<li><a href="#">내용4</a></li>
</ul>
<p class="txt"></p>
</body>
<!-- $(this) 적용 -->
<script type="text/javascript">
$(function(){
$("#menu a").mouseover(function(){ // <a>에 마우스를 올렸을 때
$("#menu a").css("background", "none"); // <a>의 배경 속성을 지움
// 이벤트가 발생한 <a> 태그만 배경이 노란색으로 바뀜.
$(this).css("background", "yellow");
var num=$("#menu a").index(this);
// mouseover 이벤트를 등록한 4개의 <a> 태그 중 이벤트가 발생한 <a>의 인덱스 값을 변수 num에 할당함.
$(".txt").text(num); // num에 할당된 값을 class="txt"인 요소에 텍스트로 출력
});
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 제이쿼리 UI 플러그인 (0) | 2017.05.25 |
|---|---|
| 효과 제어 메서드 (0) | 2017.05.24 |
| 효과 및 애니메이션 메서드 (0) | 2017.05.24 |
| 그룹 이벤트 등록 및 삭제하기 (0) | 2017.05.24 |
| 이벤트 등록 메서드 - 키보드 이벤트 (0) | 2017.05.23 |
| 키보드 접근성을 위한 이벤트 등록법 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 마우스 이벤트 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 로딩 이벤트 메서드 (0) | 2017.05.23 |
