🎨 Web_Front end/JQuery
제이쿼리 이벤트 객체와 종류 (마우스 이벤트, 키보드 이벤트, 전체 이벤트)
개발진스
2023. 4. 28. 13:24
728x90
사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수는 이벤트 객체가 생성된다.
이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다.
기본형
$("이벤트 대상 선택").mousemove(function(매개변수) {
매개변수(이벤트 객체).속성;
});
이벤트 객체의 속성 종류
| 구분 | 종류 | 설명 |
| 마우스 이벤트 | clientX | 마우스 포인터의 X 좌푯값 반환(스크롤 이동 거리 무시) |
| clientY | 마우스 포인터의 Y 좌푯값 반환(스크롤 이동 거리 무시) | |
| pageX | 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌푯값을 반환 | |
| pageY | 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌푯값을 반환 | |
| screenX | 화면 모니터를 기준으로 마우스 포인터의 X 좌표값을 반환 | |
| screenY | 화면 모니터를 기준으로 마우스 포인터의 Y 좌표값을 반환 | |
| layerX | position을 적용한 요소를 기준으로 마우스 포인터의 X 좌표값 반환 | |
| layerY | position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌표값 반환 | |
| button | 마우스 버튼의 종류에 따라 값을 반환(왼쪽: 0, 휠: 1, 오른쪽:2) | |
| 키보드 이벤트 | keyCode | 키보드의 아스키 코드값을 반환 |
| altKey | 이벤트 발생 시 Alt 키가 눌렀으면 true, 아니면 false 반환 | |
| ctrlKey | 이벤트 발생 시 Ctrl 키가 눌렀으면 true, 아니면 false 반환 | |
| shiftKey | 이벤트 발생 시 Shift 키가 눌렀으면 true, 아니면 false 반환 | |
| 전체 이벤트 | target | 이벤트가 전파된 마지막 요소를 가리킴 |
| cancelBubble | 이벤트의 전파를 차단하는 속성, 기본값은 false며 true 설정 시 전파 차단 | |
| stopPropagation() | 이벤트 전파 차단 | |
| preventDefault() | 기본 이벤트 차단 |
1. 마우스 이벤트
1) 포커스 이벤트
포커스는 마우스로 <a> 또는 <input> 태그를 클릭하거나 tab키를 누르면 생성된다.
focus() 이벤트 메소드 : 대상 요소로 포커스가 이동하면 이벤트 발생
blur() 이벤트 메소드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트 발생
focusin() 이벤트 메소드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 발생
focusout() 이벤트 메소드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생
| 구분 | 기본형 |
| focus() 이벤트 메소드 | focus이벤트 등록 $("이벤트 대상 선택").focus(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("focus", function() {자바스크립트 코드;}); |
| focus이벤트 강제 발생 $("이벤트 대상 선택").focus(); |
|
| blur() 이벤트 메소드 | blur이벤트 등록 $("이벤트 대상 선택").blur(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("blur", function() {자바스크립트 코드;}); |
| blur이벤트 강제 발생 $("이벤트 대상 선택").blur(); |
|
| focusin() 이벤트 메소드 | focusin이벤트 등록 $("이벤트 대상 선택").focusin(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("focusin", function() {자바스크립트 코드;}); |
| focusin이벤트 강제 발생 $("이벤트 대상 선택").focusin(); |
|
| focusout() 이벤트 메소드 | focusout이벤트 등록 $("이벤트 대상 선택").focusout(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("focusout", function() {자바스크립트 코드;}); |
| focusout이벤트 강제 발생 $("이벤트 대상 선택").focusout(); |
예제
<script>
$(function () {
$("#user_id_1, #user_pw_1").on("focus", function () {
$(this).css({
"background-color": "pink"
});
});
$("#user_id_1, #user_pw_1").on("blur", function () {
$(this).css({
"background-color": "#fff"
});
});
$("#frm_2").on("focusin", function () {
$(this).css({
"background-color": "pink"
});
});
$("#frm_2").on("focusout", function () {
$(this).css({
"background-color": "#fff"
});
});
});
</script>
</head>
<body>
<h1>focus / blur</h1>
<form action="#">
<p>
<label for="user_id_1">ID</label>
<input type="text" name="user_id_1" id="user_id_1">
</p>
<p>
<label for="user_pw_1">PW</label>
<input type="password" name="user_pw_1" id="user_pw_1">
</p>
</form>
<h1>focusin / focusout</h1>
<form action="#" id="frm_2">
<p>
<label for="user_id_2">ID</label>
<input type="text" name="user_id_2" id="user_id_2">
</p>
<p>
<label for="user_pw_2">PW</label>
<input type="password" name="user_pw_2" id="user_pw_2">
</p>
</form>
</body>
2) 키보드로 마우스 이벤트 대응하기
어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것이다.
| 마우스 이벤트 | 키보드 이벤트 |
| mouseover | focus |
| mouseout | blur |
예제
<script>
$(function () {
$("#btn1")
.data({ "text": "javascript" })
.on({
"mouseover": overFnc,
"mouseout": outFnc
});
$("#btn2")
.data({ "text": "welcome!" })
.on({
"mouseover focus": overFnc,
"mouseout blur": outFnc
});
function overFnc() {
$(".txt").text($(this).data("text"));
}
function outFnc() {
$(".txt").text("");
}
});
</script>
</head>
<body>
<p><button id="btn1">버튼1</button></p>
<p><button id="btn2">버튼2</button></p>
<p class="txt"></p>
</body>
3) change() 이벤트 메소드
선택한 폼 요소의 값을 새 값으로 바꾼다. 포커스가 다른 요소로 이동하면 이벤트 발생시킨다.
1. change이벤트 등록
$("이벤트 대상 선택").change(function() {자바스크립트 코드;});
$("이벤트 대상 선택").on("change", function() {자바스크립트 코드;});
2. change이벤트 강제 발생
$("이벤트 대상 선택").change();
예제
<script>
$(function () {
$("#rel_site").on("change", function () {
$(".txt").text($(this).val());
});
});
</script>
</head>
<body>
<select id="rel_site">
<option value="">사이트 선택</option>
<option value="www.google.com">구글</option>
<option value="www.naver.com">네이버</option>
<option value="www.daum.net">다음</option>
</select>
<p class="txt"></p>
</body>
2. 키보드 이벤트
사용자가 키보드로 입력을 하면 발생한다. 예를 들어 키를 누르거나 키에서 손을 떼면 이벤트가 발생하는 방식이다.
keydown() 이벤트 메소드 : 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나 해당 이벤트를 강제로 발생, 모든키 발생
keypress() 이벤트 메소드 : 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나 해당 이벤트를 강제로 발생, 기능키에 대해서는 이벤트를 발생시키지 않음
keyup() 이벤트 메소드 : 자판의 키를 눌렀다 키에서 손을 떼면 이벤트를 발생시키거나 keyup 이벤트를 강제로 발생
| 구분 | 기본형 |
| keydown() 이벤트 메소드 | keydown이벤트 등록 $("이벤트 대상 선택").keydown(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("keydown", function() {자바스크립트 코드;}); |
| keydown이벤트 강제 발생 $("이벤트 대상 선택").keydown(); |
|
| keypress() 이벤트 메소드 | keypress이벤트 등록 $("이벤트 대상 선택").keypress(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("keypress", function() {자바스크립트 코드;}); |
| keypress이벤트 강제 발생 $("이벤트 대상 선택").keypress(); |
|
| keyup() 이벤트 메소드 | keyup이벤트 등록 $("이벤트 대상 선택").keyup(function() {자바스크립트 코드;}); $("이벤트 대상 선택").on("keyup", function() {자바스크립트 코드;}); |
| keyup이벤트 강제 발생 $("이벤트 대상 선택").keyup(); |
예제
<script>
$(function () {
$(document).on("keydown", keyEventFnc);
function keyEventFnc(e) {
var direct = "";
switch (e.keyCode) {
case 37:
direct = "LEFT";
break;
case 38:
direct = "TOP";
break;
case 39:
direct = "RIGHT";
break;
case 40:
direct = "BOTTOM";
break;
}
if (direct) $("#user_id").val(direct);
}
});
</script>
</head>
<body>
<p><input type="text" name="user_id" id="user_id"></p>
</body>
3. 이벤트가 발생한 요소 추적하기
$(this) 선택자 : 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적
index() 인덱스 반환 메소드 : 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환
예제
<script>
$(function () {
$(".menuWrap_1 a").on("click", function (e) {
e.preventDefault();
$(".menuWrap_1 a").css({
"background-color": "#fff"
});
$(this).css({
"background-color": "#ff0"
});
});
$(".menuWrap_2 a").on("click", function (e) {
e.preventDefault();
$(".menuWrap_2 a").css({
"background-color": "#fff"
});
var idx = $(".menuWrap_2 a").index(this);
$(".menuWrap_2 a").eq(idx).css({
"background-color": "#0ff"
});
$(".idxNum").text(idx);
});
});
</script>
</head>
<body>
<h2>$(this)</h2>
<ul class="menuWrap_1">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<h2>Index( )</h2>
<ul class="menuWrap_2">
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
<p class="idxNum"></p>
</body>
참고 : ⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.
728x90