jQuery :: 5 -4. 포커스 이벤트, 키보드 이벤트 등록 예제

 

 

 

 

  focus  

  blur  

  focusin  

  focusout  

 

 

focus와 blur는 선택요소를 직접 focus 할 경우 적용되고,

focusin과 focusout은 선택요소의 하위요소를 focus할 경우 선택요소에 적용된다.

 

 

 

 

 

 

  메서드 두개 사용  

 

moseover, mouseout만 사용한 버튼1에서는

마우스를 버튼위에 가져다 놓을 때

'javascript'라는 문구가 화면에 나타나는 것을 볼 수 있다.

 

mouseover과 focus, mouseout과 blur를 함께 사용한 버튼2에서는

마우스를 버툰위에 가져다 놓거나

키보드로 버튼을 선택하거나 마우스로 버튼을 선택(클릭)할 때 (focus)

'welcom'이라는 문구가 화면에 나타나는 것을 볼 수 있다.

>>> 더 많은 경우(마우스외에 키보드를 사용하는 경우)의 호환성를 생각한 코드

 

 

 

 

 

 

  change  

 

 

박스 안에 글자를 선택할 경우,

그 value 값이 화면에 바뀌어 나타난다.

 

 

 

 

 

  keydown  

 

 

선택한 요소(ex 방향키[↓])를 키보드에서 눌렀을 경우,

위 화면과 같은 모습이 출력된다.

 

(keycode는 구글에서 검색 할 시 알 수 있음.)