* 마우스 이벤트
- 방문자가 사이트에서 마우스를 이용해 취하는 모든 행위를 말함.
- 예) 방문자가 지정한 요소에 마우스를 올리거나 클릭하는 등의 행위.
(1) click() / dblclick() 이벤트 메서드
- click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시킴.
- 또는 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용.
- 기본형
|
1. $(요소 선택).click(function() {...}); // 선택한 요소를 클릭할 때마다 이벤트 핸들러에 일련의 실행문을 실행시킴. 2. $(요소 선택).click(); // 마치 사이트 방문자가 선택한 요소를 클릭한 것처럼 선택한 요소에 강제로 click 이벤트가 발생함. |
- dblclick() 이벤트 메서드는 선택한 요소를 연속으로 두 번 클릭했을 때 이벤트를 발생시킴.
- 또는 선택한 요소에 강제로 더블클릭 이벤트를 발생시킴.
- 기본형
|
1. $(요소 선택).on("dblclick", function(){..}); // 선택한 요소를 두 번 연속으로 클릭했을 때 실행문을 실행시킴. 2. $(요소 선택).dblclick(); // 마치 방문자가 선택한 요소를 더블클릭한 것과 같이 선택한 요소에 강제로 더블클릭 이벤트가 발생함. |
예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<!-- 문단 태그 영역 -->
<body>
<button id="btn1">click</button>
<button id="btn2">dbclick</button>
<p>내용</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#btn1").click(function() { // <button id="btn1">를 클릭했을 때
$("p").css("background-color", "yellow");
});
$("#btn2").dbclick(function() { // <button id="btn2">를 더블클릭했을 때
$("p").css("background-color", "purple");
});
$("#btn2").dblclick(); // <button id="btn2">에 강제 더블클릭 이벤트가 발생함.
});
</script> |
cs |
(2) click(), dblclick() 이벤트 메서드를 <a> 태그에 등록할 때 주의할 점
- click() 또는 dblclick() 이벤트 메서드의 이벤트 대상 요소가 <a> 태그일 경우, 클릭할 때마다 링크된 주소로 이동됨.
- 이때 링크된 주소로 이동되지 않도록 만들어야 하는데, 다음 두 가지 방식을 이용해 링크 주소로 이동되는 것을 차단할 수 있음.
1. return false 링크 차단 메서드 사용하기
- 다음과 같이 <a> 태그에 click 이벤트가 등록되어 있으면, return false를 이용하여 <a> 태그를 클릭했을 때 링크된 주소로 이동하는 것을 차단할 수 있음.
- 단, 이때 return이 함수 실행문을 강제로 종료시키므로 return false의 위치는 함수의 마지막 부분에 작성해야 실행문이 모두 정상적으로 실행됨.
|
$("a").click(function(){ 실행문 return false; }); |
2. preventDefault() 링크 차단 메서드 사용하기
- 다음과 같이 매개 변수 e에 이벤트 객체를 생성하여 이벤트를 발생시킬 때, 이벤트 메서드인 e.preventDefault()를 사용함.
- preventDefault() 메서드를 사용하면 <a> 태그를 클릭했을 때 링크된 주소로 이동되는 것을 차단할 수 있음.
- 이때 e.preventDefault()에서 매개 변수는 꼭 'e'가 아닌 다른 임의의 영문 이름을 지어 사용해도 됨.
|
$("a").click(function(e){ e.preventDefault(); 실행문 }); |
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<body>
<a href="http://w3.org/" id="btn1">버튼1</a><br /><br />
<a href="http://w3.org/" id="btn2">버튼2</a><br /><br />
<a href="http://w3.org/" id="btn3">버튼3</a><br /><br />
<p>내용</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#btn1").click(function() { // <button id="btn1">를 클릭했을 때
$("p").css("background-color", "purple");
return false; // <a> 태그의 링크 기능을 차단함.
});
$("#btn2").click(function(e) { // <button id="btn2">를 클릭했을 때
e.preventDefault(); // <a> 태그의 링크 기능을 차단함.
$("p").css("background-color", "yellow");
});
$("#btn3").click(function() { // <button id="btn3">를 클릭했을 때
$("p").css("background-color", "aqua"); // <p> 태그에 아쿠아색 배경을 생성 & 사이트로 이동
});
});
</script> |
cs |
(3) mouseover() / mouseout() / hover() 이벤트 메서드
- mouserover() 이벤트 메서드는 선택한 요소에 마우스를 올릴 때마다 이벤트를 발생시킴.
- 또는 선택한 요소에 mouseover 이벤트를 강제로 발생시킴.
- mouseout() 이벤트 메서드는 선택한 요소에 마우스가 벗어날 때마다 이벤트를 발생시킴.
- 또는 선택한 요소에 mouseout 이벤트를 강제로 발생시킴.
- hover() 이벤트 메서드는 선택한 요소에 마우스가 올라갈 때와 벗어날 때 각각 이벤트를 발생시키며, 이때 각각 다른 이벤트 핸들러를 실행시킴.
- 기본형
|
1. $(요소 선택).mouseover(function(){...}); // 선택한 요소에 마우스를 올릴 때마다 이벤트 핸들러에 있는 실행문이 실행됨. 2. $(요소 선택).mouseover(); // 선택한 요소에 강제로 mouseover 이벤트를 발생시킴.
3. $(요소 선택).mouseout(function(){...}); // 선택한 요소에서 마우스가 벗어날 때마다 이벤트 핸들러에 있는 실행문이 실행됨. 4. $(요소 선택).mouseout(); // 선택한 요소에 강제로 mouseout 이벤트를 발생시킴.
5. $(요소 선택).hover( // 선택한 요소에 마우스를 올릴 때마다 첫 번째 이벤트 핸들러에 실행문(1)을 실행시키고, function() { 실행문(1) }, // 마우스가 벗어날 때마다 두 번째 이벤트 핸들러에 실행문(2)를 실행시킴. function() { 실행문(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 |
<!-- 문단 태그 영역 -->
<body>
<button id="btn1">mouseover/out</button>
<button id="btn2">hover</button>
<p>내용</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#btn1").mouseover(function() { // id="btn1"인 요소에 마우스를 올렸을 때 이벤트 핸들러에 실행문을 실행함.
$("p").css("background-color", "yellow"); // <p> 태그의 배경을 노란색으로 적용함.
});
$("#btn1").mouseout(function() { // id="btn1"인 요소에서 마우스가 벗어났을 때 이벤트 핸들러에 실행문을 실행함.
$("p").css("background-color", "purple"); // <p> 태그의 배경을 보라색으로 적용함.
});
$("btn2").hover(function(){ // id="btn2"인 요소에 마우스를 올렸을 때, 실행문 a를 실행하고, 그와 반대로 벗어났을 때는 실행문 b를 실행
$("p").css("background-color", "yellow") // (a) <p> 태그의 배경을 노란색으로 적용함.
}, function(){
$("p").css("background-color", "purple"); // (b) <p> 태그의 배경을 보라색으로 적용함.
});
});
</script> |
cs |
(4) mouseenter() / mouseleave() 이벤트 메서드
- mouseenter() 이벤트 메서드는 선택한 요소의 경계 범위 내에 마우스가 올라갈 때마다 이벤트가 발생됨.
- mouseleave() 이벤트 메서드는 선택한 요소의 경계 범위 내에서 마우스가 완전히 떠낫을 때마다 이벤트가 발생됨.
- mouseenter()와 mouseleave() 이벤트 메서드는 선택한 요소 영역 내에 있는 하위 요소의 영향을 받지 않지만, mouseover()와 mouseout() 이벤트 메서드는 선택한 요소 영역 내에 있는 하위 요소의 영향을 받음.
- 기본형
|
1. $(요소 선택).mouseenter(function(){...}); // 선택한 요소 영역에 마우스가 올라갈 때마다 이벤트 핸들러의 실행문을 실행시킴. 2. $(요소 선택).mouseleave(function(){...}); // 선택한 요소 영역에 마우스가 벗어날 때마다 이벤트 핸들러의 실행문을 실행시킴. |
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<style type-"text.css">
*{margin:0;padding:0;}
body{margin:20px;}
#wrap{background-color:#ccc;padding:10px}
p{background-color:#999;}
</style>
<body>
<div id="wrap">
<p>내용</p>
</div>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#wrap"),mouseout(function(){
$("p").css("border", "2px solid red");
});
$("#wrap").mouseleave(function(){
$("p").css("border", "2px dashed red");
});
});
</script> |
cs |
(5) mousemove() 이벤트 메서드
- 선택한 요소의 영역에서 마우스를 움직일 때마다 이벤트를 발생시킴.
- 또는 강제로 mousemove 이벤트를 발생시킴.
|
1. $(요소 선택).mousemove(function(){...}); // 선택한 요소의 영역에서 마우스를 움직일 때마다 이벤트 핸들러에 실행문을 실행시킴. 2. $(요소 선택).mousemove(); // 선택 요소에 강제로 mousemove 이벤트를 발생시킴. |
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!-- 문단 태그 영역 -->
<body>
<p></p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$(document).mousemove(function(e){ // 마우스를 움직일 때마다
var x=e.pageX; // 마우스의 x좌푯값을 구함.
var y=e.pageY; // 마우스의 y좌푯값을 구함.
$("p").text("x: "+x+" y: "+y); // 좌푯값을 출력함.
});
});
</script> |
cs |
(6) focus() / focusin() / blur() / focusout() 이벤트 메서드
- focus()와 focusin() 이벤트 메서드는 선택한 요소에 포커스가 다른 요소로 이동되어 사라졌을 때 이벤트가 발생함.
- blur() 이벤트 메서드는 선택한 요소에 포커스를 강제로 제거하여 이벤트를 발생시키지만, focusout() 이벤트 메서드는 강제로 포커스를 제거할 수 없음.
- 기본형
|
1. $(요소 선택).blur(function(){...}); 또는 $(요소 선택).focusout(function(){...}); // 선택한 요소에 포커스가 다른 요소로 이동되고 사라졌을 때 이벤트 핸들러에 실행문이 실행됨. 2. $(요소 선택).blur(); // 선택한 요소에 포커스가 강제로 제거되고 이벤트가 발생됨. |
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<!-- 문단 태그 영역 -->
<body>
<p>
<input type="text" name="user_name" id="user_name" />
</p>
<p>
<input type="text" name="user_id" id="user_id" value="아이디 입력"< />
</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#user_name").focus(); // focus를 강제로 발생시킴.
$("#user_id").focus(function(){ // (a) focus가 이동되었을 때
$(this).val(""); // (a)의 id="user_id"인 요소의 value 속성값이 빈 값("")이 돰.
});
$("user_id").blur(function(){ // (b) focus가 사라졌을 때
$(this).val("아이디 입력"); // (b)의 id="user_id"인 요소의 value 속성값이 "아이디 입력"으로 입력됨.
});
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 그룹 이벤트 등록 및 삭제하기 (0) | 2017.05.24 |
|---|---|
| 자주 사용되는 기타 이벤트 메서드 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 키보드 이벤트 (0) | 2017.05.23 |
| 키보드 접근성을 위한 이벤트 등록법 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 로딩 이벤트 메서드 (0) | 2017.05.23 |
| 이벤트 등록 메서드란? (0) | 2017.05.23 |
| 객체 조작 메서드 - 객체 편집 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
