카테고리 없음
j query 포커스 이벤트
깡출깡충
2024. 8. 26. 13:05
목차
- 포커스 이벤트
- focus()★ / blur()★ / focusin() / focusout()
- change()이벤트★
- 키보드 이벤트
- keyup() / keydown() / keypress()
- 이벤트가 발생한 요소 추적하기
- $(this)선택자
- index()메서드
포커스 이벤트
포커스는 마우스로 a또는 input태그를 클릭하거나 tap키를 누르면 생성됩니다.
앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없습니다.
마우스가 없는 상황에서는 키보드를 이용하여 사이트를 이용해야 하는데 이때 키보드만으로 사이트를 이용했을 때 불편하지 않도록 만들어 주는것을 '키보드 접근성'이라고 합니다.
키보드 접근성을 높이려면 마우스 이벤트를 등록할때 키보드 이벤트도 함께 등록해 주어야 합니다.
마우스 이벤트에 대응할 수 있는 포커스 이벤트를 아래 작성
focus()★ / blur()★ / focusin() / focusout()
focus()이벤트는 대상 요소로 포커스가 이동하면 이벤트를 발생시킵니다.
blur()이벤트는 대상 요소에서 다른 요소로 포커스가 이동하거나 포커스를 잃으면 이벤트가 발생합니다.
focusin()이벤트는 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트가 발생합니다.
focusout()이벤트는 대상 요소의 하위 요소 중 입력요소에서 외부 요소로 포커스가 이동하면 이벤트가 발생합니다.
(기본형)
*blur(), focusin(), focusout()은 이벤트명만 다르고 기본형은 같습니다.
$('대상요소').focus(function(){코드}) ← 단독
$('대상요소').on('focus', function(){코드}) ← 그룹
$("요소선택").focus() ← 강제
focus() / blur() / focusin() / focusout() 이벤트 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>포커스 이벤트</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<h2>focus/blur</h2>
<form action="#" method="post" id="form_1">
<div>
<label for="user_id_1">ID</label>
<input type="text" name="user_id_1" id="user_id_1" />
</div>
<div>
<label for="user_pw_1">PW</label>
<input type="password" name="user_pw_1" id="user_pw_1" />
</div>
</form>
<h2>focus in/focus out</h2>
<form action="#" method="post" id="form_2">
<div>
<label for="user_id_2">ID</label>
<input type="text" name="user_id_2" id="user_id_2" />
</div>
<div>
<label for="user_pw_2">PW</label>
<input type="password" name="user_pw_2" id="user_pw_2" />
</div>
</form>
<script>
$(function () {
/*
*/
$("#user_id_1, #user_pw_1").on("focus", function () {
$(this).css({
border: "2px solid pink",
outline: "none",
});
});
$("#user_id_1, #user_pw_1").on("blur", function () {
$(this).css({
border: "2px solid #000",
outline: "none",
});
});
// focusin과 focusout은 대상 요소가 부모여야 합니다.
$("#form_2").on("focusin", function () {
$(this).css({
backgroundColor: "red",
});
});
$("#form_2").on("focusout", function () {
$(this).css({
backgroundColor: "#fff",
});
});
});
</script>
</body>
</html>
키보드 접근성 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>포커스 이벤트</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<h2>키보드 접근성</h2>
<div>
<button id="btn1">버튼1</button>
</div>
<div>
<button id="btn2">버튼2</button>
</div>
<p class="txt"></p>
<script>
$(function () {
// 키보드 접근성을 고려하지 않은 예시.
// 마우스가 없으면 이벤트를 실행할 수 없습니다.
$("#btn1").data({ text: "javascript" }).on({
mouseover: overFnc,
mouseout: outFnc,
});
// 키보드 접근성을 고려한 예시.
// mouseover를 등록할때에는 focus함께 등록
// mouseout을 등록할때에는 blur를 함께 등록
// click을 등록할때에는 keydown또는 keypress이벤트를 함께 등록
$("#btn2").data({ text: "hello world" }).on({
"mouseover focus": overFnc,
"mouseout blur": outFnc,
});
function overFnc() {
$(".txt").text($(this).data("text"));
}
function outFnc() {
$(".txt").text("");
}
});
</script>
</body>
</html>
change()이벤트★
선택한 폼 요소의 값(value)을 새 값으로 바꿉니다. 그리고 포커스가 다른 요소로 이동했을때 이벤트가 발생합니다.
(기본형)
$('대상요소').change(function(){코드}) ← 단독
$('대상요소').on('change, function(){코드}) ← 그룹
$("요소선택").change() ← 강제
change()이벤트 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>포커스 이벤트</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<h2>change()</h2>
<select name="rel_site" 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="txt2"></p>
<div>
<input
type="text"
id="search_word"
name="search_word"
value="텍스트를 입력해주세요"
/>
</div>
<p class="txt3"></p>
<script>
$(function () {
// change()이벤트
$("#rel_site").on("change", function () {
$(".txt2").text($(this).val());
});
$("#search_word").on("change", function () {
$(".txt3").text($(this).val());
let default_v = $("#search_word").prop("defaultValue");
console.log(default_v);
});
});
</script>
</body>
</html>
키보드 이벤트
키보드 이벤트는 키보드로 무언가를 입력하면 이벤트가 발생합니다.
키보드 이벤트 종류로는 keyup, keydown, keypress이벤트가 있습니다.
keyup() / keydown() / keypress()
keyup()이벤트는 키보드에서 키를 눌렀다 뗐을때 이벤트가 발생합니다.
keydown()이벤트와 , keypress()이벤트는 키보드에서 키를 눌렀을때 이벤트가 발생합니다.
두 이벤트의 차이점은 keydown()의 경우 모든키(한글 키 제외)에 대해 이벤트를 발생시킵니다.
keypress()이벤트는 기능키(esc, F1~F12, home, tap, 한/영, 방향키 등)을 제외한 글자 키에서만 이벤트를 발생시킵니다. 또한 이벤트 핸들러에서 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있습니다.
이를 사용하여 단축키 등을 만들 수 있습니다.
(기본형)
keyup()과keypress()는 이벤트명만 다르고 기본형은 같습니다.
$('이벤트 대상 요소').keydown(function(){코드}) ← 단독
$('이벤트 대상 요소').on("keydown", function(){코드}) ← 그룹
$('이벤트 대상 요소').keydown() ← 강제
keyup() / keydown() / keypress() 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>키보드 이벤트</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<p>
<input type="text" name="keydirection" id="keydirection" />
</p>
<a href="#" id="enterForm">제출하기</a>
<script>
$(function () {
// html문서에서 키보드가 눌리면 keyEventFnc실행
$(document).on("keydown", keyEventFnc);
function keyEventFnc(e) {
let direct = "";
console.log(e.keyCode);
switch (e.keyCode) {
case 37:
direct = "LEFT";
break;
case 38:
direct = "TOP";
break;
case 39:
direct = "RIGHT";
break;
case 40:
direct = "BOTTOM";
}
if (direct) $("#keydirection").val(direct);
}
// a태그에 클릭 이벤트 넣기
$("#enterForm").click(function (e) {
e.preventDefault(); // 기본이벤트 차단
alert("제출완료!");
});
$(document).keydown(function (e) {
console.log(e.keyCode); // enter키 : 13
if (e.keyCode == 13) {
$("#enterForm").trigger("click");
}
});
});
</script>
</body>
</html>
이벤트가 발생한 요소 추적하기
사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해올때 this를 이용할 수 있습니다.
또한 이벤트가 발생한 요소의 index값을 구해올 수 있습니다.
$(this)선택자
이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 추적할 수 있습니다.
$(this)안에는 이벤트가 발생한 요소, 즉 해당 태그가 반환됩니다.
index()메서드
이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환합니다.
(기본형)
* 예시는 그룹이벤트이지만 단독 이벤트에서도 사용 가능합니다.
$('이벤트 대상').on("이벤트명", function(){
$('이벤트 대상').index(this)
})
$(this)선택자와 index()메서드 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>this, index()</title>
<script src="./js/jquery.min.js"></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="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<p class="idxNum"></p>
<script>
$(function () {
/*
*/
$(".menuWrap_1 a").on("click", function (e) {
e.preventDefault(); // 기본 이벤트 차단하기
// 모든 a태그의 배경 색상을 흰색으로 지정하기
$(".menuWrap_1 a").css({
backgroundColor: "#fff",
});
// this = 사용자가 클릭한 a태그
$(this).css({
backgroundColor: "pink",
});
});
$(".menuWrap_2 a").on("click", function (e) {
e.preventDefault(); // 기본 이벤트 차단하기
// 모든 a태그의 배경 색상을 흰색으로 지정하기
$(".menuWrap_2 a").css({
backgroundColor: "#fff",
});
// .menuWrap_2 a태그 중 클릭한 요소(this)의 index에 할당하기
let idx = $(".menuWrap_2 a").index(this);
$(".menuWrap_2 a").eq(idx).css({
backgroundColor: "yellow",
});
$(".idxNum").text(idx);
});
});
</script>
</body>
</html>