[jQuery] 포커스 이벤트 , 키보드 이벤트 , change()

 

focus() / blur() / focusin() / focusout()

focus() 이벤트 메서드는 대상 요소로 포커스가 이동하면 이벤트 발생

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

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

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

 

1. focus

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

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

 

2. blur

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

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

 

3. focusin

$("이벤트 대상 선택").focusin(function() { 자바스크립트 코드; });

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

 

4. focusout

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

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

---

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

키보드 접근성을 통해 마우스가 없이도 대상 요소를 사용할 수 있게 해야 한다.

mouseover  ->  focus 

mouseout -> blur

 

키보드 접근성을 고려한 이벤트 적용

---

change()

change() 이벤트 메서드는 선택한 폼 요소의 value 값을 새 값으로 바꾼다. focus가 다른 요소로 이동하면 이벤트 발생

 

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

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

 

---

keydown() / keyup() / keypress() 

keydown() 과 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트 발생

keypress() 는 기능키(f1~f12, Alt, Ctrl, Shift, Backspace, Tab 등)에 대해서는 이벤트 발생 X

keyup() 이벤트 메서드는 자판의 키를 눌렀다 키에서 손을 떼면 이벤트 발생

 

1. keydonw

$("이벤트 대상 선택").keydown(function() { 자바스크립트 코드; });

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

 

2. keypress

$("이벤트 대상 선택").keypress(function() { 자바스크립트 코드; });

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

 

3. keyup

$("이벤트 대상 선택").keyup(function() { 자바스크립트 코드; });

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

---

키보드 이벤트 객체의 속성

종류	설명
keyCode	키보드의 아스키 코드값을 반환
altKey	이벤트 발생 시 alt 키가 눌렸으면 true, 안 눌렸으면 false 반환
ctrlKey	이벤트 발생 시 ctrl 키가 눌렸으면 true, 안 눌렸으면 false 반환
shiftKey	이벤트 발생 시 shift 키가 눌렸으면 true, 안 눌렸으면 false 반환