[jQuery] jQuery 이벤트 함수
2022. 6. 10. 17:07ㆍJavaScript/jQuery
1. jQuery 이벤트 함수
- jQuery는 여러 이벤트에 대해 이벤트 처리를 할 수 있는 함수를 제공합니다.
- 각 함수는 해당 이벤트가 발생됬을 때 등록된 함수를 자동으로 호출합니다.
- https://www.w3schools.com/jquery/jquery_events.asp
2. jQuery 이벤트 함수 종류
- click : 클릭
- dblclick : 더블 클릭
- mouseenter : 마우스 커서가 들어왔을 때
- mouseleave : 마우스 커서가 나갔을 때
- mousedown : 마우스 키를 눌렀을때
- mouseup : 마우스 키를 떼었을때
- hover : 마우스 커서가 들어왓을때와 나갔을 때
- focuse : 포커스가 주어졌을 때
- blur : 포커스를 잃었을 때
- on : 이벤트를 설정하는 함수 (on은 여러개의 이벤트를 등록할 수 있음)
- off : 설정된 이벤트를 제거하는 함수
- one : 이벤트를 설정하고 이벤트가 발생했을때 자동으로 제거된다. (일회용 이벤트)
3. click, dblclick, mouseenter, mouseleave, mousedown, mouseup, hover, focuse, blur
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#a1").click(function(){
$("#a1").css("background-color", "black");
$("#a1").css("color", "white");
});
$("#a2").dblclick(function(){
$("#a2").css("background-color", "black");
$("#a2").css("color", "white");
});
$("#a3").mouseenter(function(){
$("#a3").css("background-color", "black");
$("#a3").css("color", "white");
});
$("#a3").mouseleave(function(){
$("#a3").css("background-color", "white");
$("#a3").css("color", "black");
});
$("#a4").mousedown(function(){
$("#a4").css("background-color", "black");
$("#a4").css("color", "white");
});
$("#a4").mouseup(function(){
$("#a4").css("background-color", "white");
$("#a4").css("color", "black");
});
$("#a5").hover(function(){
$("#a5").css("background-color", "black");
$("#a5").css("color", "white");
}, function(){
$("#a5").css("background-color", "white");
$("#a5").css("color", "black");
});
$("#a6").focus(function(){
$("#a6").css("background-color", "black");
$("#a6").css("color", "white");
});
$("#a6").blur(function(){
$("#a6").css("background-color", "white");
$("#a6").css("color", "black");
});
});
</script>
</head>
<body>
<h3 id="a1">click</h3>
<h3 id="a2">double click</h3>
<h3 id="a3">mouse enter/leave</h3>
<h3 id="a4">mouse down/up</h3>
<h3 id="a5">hover</h3>
<input id="a6" type="text">
</body>
</html>
4. on, off, one
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#a1").on("click", function(){
alert("click");
});
$("#a2").one("click", function(){
alert("click");
});
$("#a3").on({
click : function(){
alert("click");
},
mouseenter : function(){
$("#a3").css("background-color", "black");
},
mouseleave : function(){
$("#a3").css("background-color", "white");
}
});
});
function remove_event(){
$("#a1").off("click");
}
</script>
</head>
<body>
<h3 id="a1">on</h3>
<button type="button" onclick="remove_event()">이벤트 제거</button>
<hr>
<h3 id="a2">one</h3>
<h3 id="a3">event settings</h3>
</body>
</html>
학습정리
- jQuery는 다양한 이벤트를 처리할 수 있도록 함수를 제공함
- 이벤트의 이름과 동일한 함수를 이용해 이벤트를 처리할 수 있음
- on을 사용하면 지정된 이벤트를 등록할 수 있음
- off를 사용하면 지정된 이벤트를 제거할 수 있음
- one을 사용하면 1회성 이벤트 등록이 가능함
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/Event/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] DOM 추가 삭제 (0) | 2022.06.10 |
|---|---|
| [jQuery] DOM 제어하기 (0) | 2022.06.10 |
| [jQuery] Form 태그 선택자 (0) | 2022.06.10 |
| [jQuery] 상태 선택자 (0) | 2022.06.09 |
| [jQuery] 속성 선택자 (0) | 2022.06.09 |