ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • j query 포커스 이벤트
      카테고리 없음 2024. 8. 26. 13:05

      목차

      • 포커스 이벤트
      • focus()★ / blur()★ / focusin() / focusout()
      • change()이벤트★
      • 키보드 이벤트
      • keyup() / keydown() / keypress()
      • 이벤트가 발생한 요소 추적하기
      • $(this)선택자
      • index()메서드

       

      포커스 이벤트
      포커스는 마우스로 a또는 input태그를 클릭하거나 tap키를 누르면 생성됩니다.
      앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없습니다.
      마우스가 없는 상황에서는 키보드를 이용하여 사이트를 이용해야 하는데 이때 키보드만으로 사이트를 이용했을 때 불편하지 않도록 만들어 주는것을 '키보드 접근성'이라고 합니다.
      키보드 접근성을 높이려면 마우스 이벤트를 등록할때 키보드 이벤트도 함께 등록해 주어야 합니다.

      마우스 이벤트에 대응할 수 있는 포커스 이벤트를 아래 작성

       

      focus()★ / blur()★ / focusin() / focusout()
      focus()이벤트는 대상 요소로 포커스가 이동하면 이벤트를 발생시킵니다.
      blur()이벤트는 대상 요소에서 다른 요소로 포커스가 이동하거나 포커스를 잃으면 이벤트가 발생합니다.
      focusin()이벤트는 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트가 발생합니다.
      focusout()이벤트는 대상 요소의 하위 요소 중 입력요소에서 외부 요소로 포커스가 이동하면 이벤트가 발생합니다.

      (기본형)
      *blur(), focusin(), focusout()은 이벤트명만 다르고 기본형은 같습니다.
      $('대상요소').focus(function(){코드}) ← 단독
      $('대상요소').on('focus', function(){코드}) ← 그룹
      $("요소선택").focus() ← 강제

       

      focus() / blur() / focusin() / focusout() 이벤트 사용해보기

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>포커스 이벤트</title>
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
    <h2>focus/blur</h2>
    <form action="#" method="post" id="form_1">
      <div>
        <label for="user_id_1">ID</label>
        <input type="text" name="user_id_1" id="user_id_1" />
      </div>

      <div>
        <label for="user_pw_1">PW</label>
        <input type="password" name="user_pw_1" id="user_pw_1" />
      </div>
    </form>

    <h2>focus in/focus out</h2>
    <form action="#" method="post" id="form_2">
      <div>
        <label for="user_id_2">ID</label>
        <input type="text" name="user_id_2" id="user_id_2" />
      </div>

      <div>
        <label for="user_pw_2">PW</label>
        <input type="password" name="user_pw_2" id="user_pw_2" />
      </div>
    </form>
    <script>
      $(function () {
        /*
         */

        $("#user_id_1, #user_pw_1").on("focus", function () {
          $(this).css({
            border: "2px solid pink",
            outline: "none",
          });
        });

        $("#user_id_1, #user_pw_1").on("blur", function () {
          $(this).css({
            border: "2px solid #000",
            outline: "none",
          });
        });

        // focusin과 focusout은 대상 요소가 부모여야 합니다.
        $("#form_2").on("focusin", function () {
          $(this).css({
            backgroundColor: "red",
          });
        });

        $("#form_2").on("focusout", function () {
          $(this).css({
            backgroundColor: "#fff",
          });
        });
      });
    </script>
  </body>
</html>

       

      키보드 접근성 사용해보기

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>포커스 이벤트</title>
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
    <h2>키보드 접근성</h2>
    <div>
      <button id="btn1">버튼1</button>
    </div>
    <div>
      <button id="btn2">버튼2</button>
    </div>
    <p class="txt"></p>
    <script>
      $(function () {
        // 키보드 접근성을 고려하지 않은 예시.
        // 마우스가 없으면 이벤트를 실행할 수 없습니다.
        $("#btn1").data({ text: "javascript" }).on({
          mouseover: overFnc,
          mouseout: outFnc,
        });

        // 키보드 접근성을 고려한 예시.
        // mouseover를 등록할때에는 focus함께 등록
        // mouseout을 등록할때에는 blur를 함께 등록
        // click을 등록할때에는 keydown또는 keypress이벤트를 함께 등록
        $("#btn2").data({ text: "hello world" }).on({
          "mouseover focus": overFnc,
          "mouseout blur": outFnc,
        });

        function overFnc() {
          $(".txt").text($(this).data("text"));
        }

        function outFnc() {
          $(".txt").text("");
        }
      });
    </script>
  </body>
</html>

       

      change()이벤트★
      선택한 폼 요소의 값(value)을 새 값으로 바꿉니다. 그리고 포커스가 다른 요소로 이동했을때 이벤트가 발생합니다.

      (기본형)
      $('대상요소').change(function(){코드}) ← 단독
      $('대상요소').on('change, function(){코드}) ← 그룹
      $("요소선택").change() ← 강제

       

      change()이벤트 사용해보기

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>포커스 이벤트</title>
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
    <h2>change()</h2>
    <select name="rel_site" id="rel_site">
      <option value="사이트 선택">사이트 선택</option>
      <option value="www.google.com">구글</option>
      <option value="www.naver.com">네이버</option>
      <option value="www.daum.net">다음</option>
    </select>
    <p class="txt2"></p>

    <div>
      <input
        type="text"
        id="search_word"
        name="search_word"
        value="텍스트를 입력해주세요"
      />
    </div>
    <p class="txt3"></p>
    <script>
      $(function () {
        // change()이벤트
        $("#rel_site").on("change", function () {
          $(".txt2").text($(this).val());
        });

        $("#search_word").on("change", function () {
          $(".txt3").text($(this).val());

          let default_v = $("#search_word").prop("defaultValue");
          console.log(default_v);
        });
      });
    </script>
  </body>
</html>

       

      키보드 이벤트
      키보드 이벤트는 키보드로 무언가를 입력하면 이벤트가 발생합니다.
      키보드 이벤트 종류로는 keyup, keydown, keypress이벤트가 있습니다.

       

      keyup() / keydown() / keypress()
      keyup()이벤트는 키보드에서 키를 눌렀다 뗐을때 이벤트가 발생합니다.
      keydown()이벤트와 , keypress()이벤트는 키보드에서 키를 눌렀을때 이벤트가 발생합니다.
      두 이벤트의 차이점은 keydown()의 경우 모든키(한글 키 제외)에 대해 이벤트를 발생시킵니다.
      keypress()이벤트는 기능키(esc, F1~F12, home, tap, 한/영, 방향키 등)을 제외한 글자 키에서만 이벤트를 발생시킵니다. 또한 이벤트 핸들러에서 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있습니다.
      이를 사용하여 단축키 등을 만들 수 있습니다.

      (기본형)
      keyup()과keypress()는 이벤트명만 다르고 기본형은 같습니다.
      $('이벤트 대상 요소').keydown(function(){코드}) ← 단독
      $('이벤트 대상 요소').on("keydown", function(){코드}) ← 그룹
      $('이벤트 대상 요소').keydown() ← 강제

       

      keyup() / keydown() / keypress() 사용해보기

      키보드 enter키 눌러서 이동하기
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>키보드 이벤트</title>
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
    <p>
      <input type="text" name="keydirection" id="keydirection" />
    </p>

    <a href="#" id="enterForm">제출하기</a>
    <script>
      $(function () {
        //  html문서에서 키보드가 눌리면 keyEventFnc실행
        $(document).on("keydown", keyEventFnc);

        function keyEventFnc(e) {
          let direct = "";

          console.log(e.keyCode);

          switch (e.keyCode) {
            case 37:
              direct = "LEFT";
              break;
            case 38:
              direct = "TOP";
              break;
            case 39:
              direct = "RIGHT";
              break;
            case 40:
              direct = "BOTTOM";
          }
          if (direct) $("#keydirection").val(direct);
        }

        // a태그에 클릭 이벤트 넣기
        $("#enterForm").click(function (e) {
          e.preventDefault(); // 기본이벤트 차단
          alert("제출완료!");
        });

        $(document).keydown(function (e) {
          console.log(e.keyCode); // enter키 : 13

          if (e.keyCode == 13) {
            $("#enterForm").trigger("click");
          }
        });
      });
    </script>
  </body>
</html>

       

      이벤트가 발생한 요소 추적하기
      사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해올때 this를 이용할 수 있습니다.
      또한 이벤트가 발생한 요소의 index값을 구해올 수 있습니다.

       

      $(this)선택자
      이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 추적할 수 있습니다.
      $(this)안에는 이벤트가 발생한 요소, 즉 해당 태그가 반환됩니다.

       

      index()메서드
      이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환합니다.

      (기본형)
      * 예시는 그룹이벤트이지만 단독 이벤트에서도 사용 가능합니다.
      $('이벤트 대상').on("이벤트명", function(){
      $('이벤트 대상').index(this)
      })

       

      $(this)선택자와 index()메서드 사용해보기

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>this, index()</title>
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
    <h2>$(this)</h2>
    <ul class="menuWrap_1">
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
    </ul>

    <h2>index()</h2>
    <ul class="menuWrap_2">
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
    </ul>
    <p class="idxNum"></p>
    <script>
      $(function () {
        /*
         */

        $(".menuWrap_1 a").on("click", function (e) {
          e.preventDefault(); // 기본 이벤트 차단하기

          //  모든 a태그의 배경 색상을 흰색으로 지정하기
          $(".menuWrap_1 a").css({
            backgroundColor: "#fff",
          });

          //  this = 사용자가 클릭한 a태그
          $(this).css({
            backgroundColor: "pink",
          });
        });

        $(".menuWrap_2 a").on("click", function (e) {
          e.preventDefault(); // 기본 이벤트 차단하기

          //  모든 a태그의 배경 색상을 흰색으로 지정하기
          $(".menuWrap_2 a").css({
            backgroundColor: "#fff",
          });

          //  .menuWrap_2 a태그 중 클릭한 요소(this)의 index에 할당하기
          let idx = $(".menuWrap_2 a").index(this);

          $(".menuWrap_2 a").eq(idx).css({
            backgroundColor: "yellow",
          });

          $(".idxNum").text(idx);
        });
      });
    </script>
  </body>
</html>
    Designed by Tistory.

    티스토리툴바