포커스 이벤트
포커스는 마우스로 a 또는 input 태그를 클릭하거나 tab키를 누르면 생성된다.
앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없다.
마우스가 없는 상황에서는 키보드를 이용하여 사이트를 이용해야 하는데
이때 키보드만으로 사이트를 이용했을때 불편하지 않도록 만들어 주는 것을
'키보드 접근성'이라고 한다.
키보드 접근성을 높이려면 마우스 이벤트를 등록할 때 키보드 이벤트도 함께 등록해 주어야 한다.
마우스 이벤트에 대응할 수 있는 포커스 이벤트를 아래 작성함
focus()★ / blur()★ / focusin() / focusout()
------------------------------------------------------------
focus()이벤트는 대상 요소로 포커스가 이동하면 이벤트를 발생시킨다.
blur()이벤트는 대상 요소에서 다른 요소로 포커스가 이동하거나 포커스를 잃으면 이벤트가 발생한다.
focusin()이벤트는 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트가 발생한다.
focusout()이벤트는 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 포커스가 이동하면 이벤트가
발생한다.
[기본형]
*blur() ,focusin(),focusout()은 이벤트명만 다르고 기본형은 같다.
$('대상요소').focus(function(){코드}) - 단독
$('대상요소').on('focus', function(){코드}) - 그룹
$('대상요소').focus() - 강제
포커스 이벤트를 사용하면 위의 이미지와 같이 포커스 되었을 때 오렌지 색상으로 테두리가 변하고 포커스를 잃었을 때 빨간 색상으로 변하게 할 수 있다.
<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>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>$("#user_id_1, #user_pw_1").on("focus", function () {
$(this).css({
border: "2px solid orange",
outline: "none",
});
});
$("#user_id_1, #user_pw_1").on("blur", function () {
$(this).css({
border: "2px solid red",
outline: "none",
});
});
대상 요소에 있는 자식 요소가 포커스 되었을 때 focusin이 적용이 되고 대상의 자식 요소들이 모두 포커스를 잃었을 때 focusout이 적용된다.
$("#form_2").on("focusin", function () {
$(this).css({
backgroundColor: "pink",
});
});
$("#form_2").on("focusout", function () {
$(this).css({
backgroundColor: "#fff",
});
});
위의 이미지에서 버튼 1은 마우스롤 오버하지않으면 텍스트가 안나오고 버튼2는 마우스오버하거나 포커스가 될때 텍스트가 나오는 모습이다. 키보드 접근성을 고려하여 mouseover를 등록할때에는 focus와 함께 등록 , mouseout을 등록할때에는 blur를 함께 등록해야한다.
click을 등록할때에는 keydown이나 keypress이벤트를 함꼐 등록해야한다.
//키보드 접근성을 고려하지 않은 예시
//마우스가 없으면 이벤트를 실행할 수 없음.
$("#btn1")
.data({ text: "javascript" })
.on({ mouseover: overFnc, mouseout: outFnc });
});
//키보드 접근성을 고려한 예시
$("#btn2")
.data({ text: "hello world" })
.on({ "mouseover focus": overFnc, "mouseout blur": outFnc });
//마우스 오버와 포커스를 한번에 적용하여 마우스가 없을때 포커스될 때도 함수가 실행이 된다.
function overFnc() {
$(".txt").text($(this).data("text"));
//data는 버튼이나 다른 태그에서 기본적으로 어떤 값을 가지고 있어야
//할때 데이터라는 메서드를 사용할 수 있다.
}
function outFnc() {
$(".txt").text("");
}
위의 이미지와 같이 옵션에서 해당 요소를 선택할때 아래에 p태그에 빈문자에서 value값이 텍스트로 나타나는걸 알 수 있다.
<h2>change()</h2>
<select name="rel_site" id="rel_site">
<option value="">사이트 선택</option>
<option value="www.google.com">google</option>
<option value="www.naver.com">naver</option>
<option value="www.daum.net">daum</option>
</select>
<p class="txt2"></p>
$("#rel_site").on("change", function () {
$(".txt2").text($(this).val());
});change()이벤트★
선택한 폼 요소의 값(value)을 새 값으로 바꾼다. 그리고 포커스가 다른 요소로 이동했을 때 이벤트가 발생한다.
[기본형]
$('대상요소').change(function(){코드}) - 단독 $('대상요소').on('change', function(){코드}) - 그룹 $('대상요소').change() - 강제
안녕하세요