* 키보드 접근성을 위한 이벤트 등록법
- 키보드 접근성이란, 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을 키보드만으로 사용할 수 있도록 보장하는 것을 말함.
- 키보드 접근성을 고려하여 마우스 이벤트를 등록할 때는 포커스를 이동할 수 있는 요소들인 <a>와 <button> 태그, 또는 입력 요소인 <input>, <select>, <textarea> 태그에 이벤트를 등록해야 함.
[마우스에 대응하는 키보드 이벤트]
- 마우스 이벤트를 등록할 때는 마우스에 대응하는 키보드 이벤트도 함께 등록해야 함.
- 그래야 마우스가 없는 방문객이 사이트를 방문했을 때 키보드만으로도 접근할 수 있어 방문자가 불편함을 느끼지 않을 수 있음.
- 마우스 이벤트에 대응하는 키보드 이벤트
|
마우스 이벤트 |
마우스 이벤트에 대응하는 키보드 이벤트 | ||
|
mouseover() |
마우스 커서가 선택한 요소에 올라갔을 때 이벤트가 발생 |
focus() |
선택한 요소에 포커스가 이동했을 때 이벤트가 발생 |
|
mouseout() |
마우스 커서가 선택한 요소에 벗어났을 때 이벤트가 발생 |
blur() |
선택한 요소에 포커스가 다른 요소로 이동되어 사라졌을 때 이벤트가 발생 |
- 예제1) 키보드 접근성을 배려하지 않은 이벤트 예제 - 비추천
|
<button id="btn">노출 버튼</button>
&("#btn").mouseover(function(){ $(this).next().css("display","block"); }); |
-> 이렇게 2개의 이벤트를 따로 작성하여 등록하면 문장이 많이 길어진다는 단점이 있음.
- 예제2) 키보드 접근성을 배려한 이벤트 적용 예시 - 방법(1)
|
<button id="btn">노출 버튼</button>
&("#btn").mouseover(function(){ $(this).next().css("display","block"); });
&("#btn").focus(function(){ $(this).next().css("display","block"); }); |
- 예제3) 키보드 접근성을 배려한 이벤트 적용 예시 - 추천/방법(2)
|
<button id="btn">노출 버튼</button>
&("#btn").on("mouseover focus", function(){ $(this).next().css("display", "blcok"); }); |
-> on() 메서드 : 여러 이벤트 메서드를 한번에 등록할 수 있게하는 메서드
- 기본형
|
$(요소 선택).on("이벤트 종류 1 이벤트 종류 2 이벤트 종류 3 ... 이벤트 종류 n function(){...}) |
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<a href="#" id="btn1">버튼1</a>
<a href="#" id="btn2">버튼2</a>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#btn1").mouseover(function(){ // 버튼1에 마우스를 올렸을 때
alert("good");
});
// 버튼2에 마우스를 올리거나 포커스가 생성되었을 때
$("#btn2").on("mouseover focus", function(){
alert("hello");
});
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 효과 및 애니메이션 메서드 (0) | 2017.05.24 |
|---|---|
| 그룹 이벤트 등록 및 삭제하기 (0) | 2017.05.24 |
| 자주 사용되는 기타 이벤트 메서드 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 키보드 이벤트 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 마우스 이벤트 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 로딩 이벤트 메서드 (0) | 2017.05.23 |
| 이벤트 등록 메서드란? (0) | 2017.05.23 |
| 객체 조작 메서드 - 객체 편집 메서드 (0) | 2017.05.22 |
