포커스 이벤트
포커스는 마우스로 a 또는 input 태그를 클릭하거나 tab키를 누르면 생성된다.
앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없다. 마우스가 없는 상황에서는 키보드를 이용하여 사이트를 이용해야 하는데 이때 키보드만으로 사이트를 이용했을 때 불편하지 않도록 만들어 주는 것을
'키보드 접근성' 이라고 한다.
키보드 접근성을 높이려면
마우스 이벤트를 등록할 때 키보드 이벤트도 함께 등록해 주어야 한다.
마우스 이벤트에 대응할 수 있는 포커스 이벤트
★focus( ) / ★ blur( ) / focusin( ) / focusout( )
- focus :
대상 요소로 포커스가 이동하면 이벤트가 발생
- blur
: 대상 요소에서 다른 요소로 포커스가 이동하거나 포커스를 잃으면 이벤트가 발생
- focusin
: 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트가 발생
대상 요소가 부모요소여야 한다.
(거의 쓰는 일이 없다)
- focusout
: 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 포커스가 이동하면 이벤트가 발생
대상 요소가 부모요소여야 한다.
(거의 쓰는 일이 없다)
* blur, focusin, focusout은 이벤트명만 다르고 기본형은 같다.
[기본형]
-단독
$('대상요소').focus(function(){ 코드 })
-그룹
$('대상요소').on('focus', function(){ 코드 })
-강제
$('대상요소').focus();
focus / blur 예제
<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>
//this = 내가 선택한 이벤트가 발생하는 객체
// 포커스 상태
$("#user_id_1, #user_pw_1").on("focus", function () {
$(this).css({
border: "2px solid orange",
outline: "none",
});
});
// 포커스가 벗어난 상태 - blur
$("#user_id_1, #user_pw_1").on("blur", function () {
$(this).css({
border: "2px solid black",
outline: "none",
});
});
focusin / focusout 예제
<h2>focusin / focusout</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>
// 포커스인과 포커스 아웃은 대상요소가 부모여야한다.
$("#form_2").on("focusin", function () {
$(this).css({
backgroundColor: "pink",
});
});
// 포커스 아웃일때
$("#form_2").on("focusout", function () {
$(this).css({
backgroundColor: "#fff",
});
});
키보드 접근성
** mouseover를 등록할 때에는 focus를 함께 등록한다.
mouseout을 등록할 때에는 blur를 함께 등록
click을 등록할 때에는 keydown 또는 keypress 이벤트를 함께 등록
<h2>키보드 접근성</h2>
<div>
<button id="btn1">버튼1</button>
</div>
<div>
<button id="btn2">버튼2</button>
</div>
<p class="txt"></p>
1. 키보드 접근성을 고려하지 않은 예시
//키보드 접근성을 고려하지 않은 예시 ( 마우스가 없으면 이벤트를 실행할 수 없다.)
// on 뒤에 함수명으로만 쓸 수도 있다. 함수는 따로 만들어놓고.
$("#btn1")
.data({ text: "javascript" })
.on({ mouseover: overFnc, mouseout: outFnc });
function overFnc() {
$(".txt").text($(this).data("text"));
}
function outFnc() {
$(".txt").text("");
}
** 동일한 기능을 여러군데 사용할 때 따로 함수로 빼고, on 에 함수명으로 적어주면 된다.
이때 함수명 뒤에 ( ) 쓰지 않는다
2. 키보드 접근성을 고려한 예시
//키보드 접근성을 고려
$("#btn2")
.data({ text: "hello" })
.on({ "mouseover focus": overFnc, "mouseout blur": outFnc });
function overFnc() {
$(".txt").text($(this).data("text"));
}
function outFnc() {
$(".txt").text("");
}
이벤트 여러 개 같이 등록할 때는 공백으로 구분하고 문자열로 감싸준다.
