IT/JSP&javascript&jQuery

[jQuery] 키보드 접근성을 위한 이벤트 등록법

바다, 2018. 11. 22. 10:30
반응형

키보드 접근성이란


- 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을 키보드만으로 사용할 수 있도록 보장하는 것을 말함.



키보드 접근성을 고려하여 마우스 이벤트를 등록할 때는 포커스를 이동할 수 있는 요소들인


<a>와 <button> 태그, 또는 입력 요소인 <input>, <select>, <textarea> 태그


에 이벤트를 등록해야 함.


마우스 이벤트

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

 mouseover()

 마우스 커서가 선택한 요소에 올라갔을 때 이벤트 발생

 focus()

 선택한 요소에 포커스가 이동했을 때 이벤트 발생

 mouseout()

 마우스 커서가 선택한 요소에 벗어났을 때 이벤트 발생

 blur()

 선택한 요소에 포커스가 다른 요소로 이동되어 사라졌을 때 이벤트 발생



$('.btn').on('mouseover, focus', function() {
//
}




키보드 이벤트

keydown() / keyup() / keypress()

keydown(), keypress() 자판을 눌렀을 때 이벤트 발생
keydown()은 이벤트가 발생했을 때 이벤트의 객체를 이용하면 눌려진 모든 자판에 대한 고유 키 코드값을 받아올 수 있지만,
keypress()는 문자 (a~z, !,@,#... 등) 자판에 대한 고유키 코드값은 받아오지 못한다.

keyup()은 자판을 눌렀다 떼었을 때 발생

반응형