🧀 [UIUX] 0217 JQUERY Coding, 제이쿼리 6일차

✏️ 2025. 02월 17일 / jQuery 6일

🔎 포커스 이벤트
포커스는 마우스로 a태그 또는 input태그를 클릭하거나 tab키를 누르면 생성됩니다.
앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없습니다.
마우스가 없다면 사용자는 키보드만 가지고 웹사이트를 이용해야 합니다.
이때 사용자가 키보드만으로 사이트를 이용하더라도 불편함 없이 사용할 수 있도록 하려면
제이쿼리가 잘 작동해야 하는데 이를 "키보드 접근성"이라고 합니다.
키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 a또는 input태그에 등록하고,
키보드가 없을 경우를 고려하여 키보드 이벤트까지 등록해야 합니다.
✨ focus() / blur() / focusin() / focusout()
---------------------------------------------------------------
focus() 이벤트는 대상 요소로 포커스가 이동하면 이벤트 핸들러를 실행시키고,
blur() 이벤트는 대상 요소에서 포커스가 사라지거나 다른 요소로 이동하면 이벤트 핸들러를 실행시킵니다.
focusin() 이벤트는 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 핸들러를 실행시키고,
focusout() 이벤트는 대상 요소의 하위 요소 중 입력 요소에서
다른 외부 요소로 이동했을 때 이벤트 핸들러를 실행시킵니다.

      [기본형]
      - $('이벤트 대상'). focus(function(){ 코드 }); -> 단독
      - $('이벤트 대상').on("focus", function(){ 코드 }); -> 그룹
      - $('이벤트 대상').focus(); -> 강제
      * blur() 이벤트는 이벤트명만 다르고 기본형은 동일합니다.

      - $('부모요소'). focusin(function(){ 코드 }); -> 단독
      - $('부모요소').on("focusin", function(){ 코드 }); -> 그룹
      - $('부모요소').focusin(); -> 강제

👧🏻 키보드로 마우스 이벤트 대응하기
키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 경우
마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것을 뜻합니다.
🧑🏻 마우스 이벤트에 대응하는 키보드 이벤트
mouseover를 등록할때에는 focus이벤트를 함께 등록하고
mouseout을 등록할때에는 blur이벤트를 함께 등록합니다.

🚗 change 이벤트
change 이벤트는 선택한 폼 요소의 값(value)을 새 값으로 바꿉니다.
그리고 다른 요소로 포커스가 이동하면 이벤트를 발생시킵니다.

    [기본형]
    $('요소').change(function(){ 코드 }) -> 단독
    $('요소').on("change", function(){ 코드 }) -> 그룹
    $('요소').change() -> 강제

🪐keydown() / keyup() / keypress()
keydown(), keypress() 이벤트는 키보드에서 키가 눌리면 이벤트를 발생시킵니다.
두 이벤트의 차이점은 keydown()은 모든 키에 대해 이벤트를 발생시키지만(한/영키 제외)
keypress()는 기능키(F1~F12, esc, spacebar, alt, shift, ctrl 등등...)에
대해서는 이벤트를 발생시키지 않습니다.
또한, 키보드 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면
고유의 키 값을 구할 수 있으며 이를 이용하여 단축키같은 기능을 만들 수 있습니다.

      [기본형]
      $(document 또는 "요소").keydown(function(){ 코드 });-> 단독
      $(document 또는 "요소").on("keydown", function(){ 코드 });-> 그룹
      $(document 또는 "요소").keydown() -> 강제