07. 제이쿼리 이벤트 (5) : 포커스 이벤트

728x90

포커스는 마우스로 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성됨

앞에서 작성한 포스팅에는 마우스 이벤트는 마우스가 없으면 사용할 수 없다.

사용자는 키보드만 가지고 사용해야 함.

이때 사용자가 키보드만으로 사이트를 이용해도 불편함이 없도록 제이쿼리가 잘 작동되어야 하는데,

이를 키보드 접근성이라 한다.

키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 될 수 있으면 <a> 또는 <input> 태그에 등록하고,

키보드가 없을 경우를 고려하여 마우스 이벤트에 대응할 수 있는 키보드 이벤트까지 등록해야 한다.

focus() / blur() / focusin() / focusout() 이벤트 메서드

- focus() 이벤트 메서드 : 대상 요소로 포커스가 이동하면 이벤트를 발생 시킴

- blur() 이벤트 메서드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킴

- focusin() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생 시킴

- focusout() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생 시킴

focus와 blur 이벤트 등록 메서드의 기본형

focus 이벤트 등록
$("이벤트 대상 선택").focus(funtion(){자바스크립트 코드; });
$("이벤트 대상 선택").on("focus", funtion(){자바스크립트 코드; });

focus 이벤트 강제 발생
$("이벤트 대상 선택").focus();

blur 이벤트 등록
$("이벤트 대상 선택").blur(function(){자바스크립트 코드; });
$("이벤트 대상 선택").on("blur", function(){자바스크립트 코드; });

blur 이벤트 강제 발생
$("이벤트 대상 선택").blur();

focusin과 focusout 이벤트 메서드의 기본형

focusin 이벤트 등록
$("이벤트 대상 선택").focusin(funtion(){자바스크립트 코드; });
$("이벤트 대상 선택").on("focusin", funtion(){자바스크립트 코드; });

focusin 이벤트 강제 발생
$("이벤트 대상 선택").focusin();

focusout 이벤트 등록
$("이벤트 대상 선택").focusout(function(){자바스크립트 코드; });
$("이벤트 대상 선택").on("focusout", function(){자바스크립트 코드; });

blur 이벤트 강제 발생
$("이벤트 대상 선택").focusout();

예제)

focus(), blur(), focusin(), focusout() 이벤트 메서드를 이용한 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<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"
           });
       });
 
       //포커스가 이벤트 대상 요소에서 입력 요소로 이동하면 이벤트가 
       //발생한 요소(<form id="frm_2">)의 배경색을 분홍색으로 변경함
       $("#frm_2").on("focusin",
       function(){
           $(this).css({
               "background-color" : "pink"
           });
       });
 
       $("#frm_2").on("focusout",
       function(){
           $(this).css({
               "background-color" : "#fff"
           });
       });
    });
</script>
<body>
    <h1>focus / blurs</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>
</html>
 

*결과

키보드로 마우스 이벤트 대응하기

- 키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것을 말함

- 마우스 이벤트가 등록되었을 때는 반드시 키보드로 작동할 수 있게 대응 이벤트를 함께 작성해야 한다.

마우스 이벤트에 대한 키보드 대응 이벤트

마우스 이벤트	키보드 이벤트
mouseover	focus
mouseout	blur

예제)

버튼에 마우스 포인터를 올리면 마우스 이벤트가 발생되어 '내용1'이 숨겨지는 예

해당 예는 마우스가 없으면 동작하지 않는다.

1. 키보드 접근성을 배려하지 않은 이벤트 예(비추천)

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>

$(".btn").mouseover(function(){
	$(".txt_1").hide();
});

* 하지만 해당 이벤트에 대응하는 키보드도 함께 등록하면 마우스가 없는 사용자도 키보드를 사용해 이 버튼의 기능을 사용할 수 있다.

2. 키보드 접근성을 배려한 이벤트 적용 예(추천)

<button class = "btn"> 버튼 </button>
<p class="txt_1"> 내용1 </p>

$(".btn").on("mouseover focus", function(){
	$("txt_1").hide();
});

다음과 같이 코드를 작성하여 2개의 버튼에 마우스 이벤트를 등록, 이 때 하나는 키보드 접근성을 무시하고 나머지 하나는 키보드 접근성을 고려하여 등록함.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<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>
<body>
    <p><button id="btn1">버튼1</button></p>
    <p><button id="btn2">버튼2</button></p>
    <p class="txt"></p>
</body>
</html>

* 결과 (버튼1 마우스 O, 키보드 X)

change() 이벤트 메서드

- change()이벤트 메서드는 선택한 폼 요소의 값(value)을 새 값으로 바꿈.

그리고 포커스가 다른 요소로 이동하면 이벤트를 발생시킴

1. focus 이벤트 등록
$("이벤트 대상 선택").change(function(){자바스크립트 코드;});
$("이벤트 대상 선택").on("change", function(){자바스크립트 코드;});

2.focus 이벤트 강제 발생
$("이벤트 대상 선택").change();

728x90

'IT 개발 > JavaScript' 카테고리의 다른 글

[Node.js 다운로드] (0)	2021.04.18
도시하천) 강우 레이더 조회 (0)	2020.03.17
07. 제이쿼리 이벤트 (4) : 이벤트 객체와 종류 / Scroll 이벤트 메서드 (0)	2020.03.15
07. 제이쿼리 이벤트 (3) : 마우스 이벤트 (0)	2020.03.15
07. 제이쿼리 이벤트 (1) : 이벤트 메서드 종류 및 이벤트 발생 / 제거 (0)	2020.03.08

개발이 뭔데?!

07. 제이쿼리 이벤트 (5) : 포커스 이벤트

'IT 개발 > JavaScript' 카테고리의 다른 글

티스토리툴바

07. 제이쿼리 이벤트 (5) : 포커스 이벤트

'IT 개발 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바