회원공유자료

jQuery 이벤트 리스너

관리자 2019.04.04 17:05 조회 수 : 40

마우스 이벤트

  • click() :마우스를 클릭했을 때 발생.

    • 예시 1

      <button id="btn">버튼을 클릭해보세요!</button>

<p id="text"></p> <!--버튼을 클릭했을 때 텍스트 출력할 공간 만들어주기-->
      $(function () {
        $("body").on( //<body>요소에 이벤트 들어갈거다.
          {
            click: function () { //click이벤트가 발생했을 때 동작은
              $("#text").html("버튼을 클릭했군요?"); //아이디가 text인 부분에 html 요소가 추가된다.
            },
          },
          "#btn" //아이디가 btn인 요소에 이벤트 핸들러를 등록하겠다. 
        );
      });

    • 예시 2

      <button>button</button>
    <input />
      $("button").click(function () {
        alert("click");
      });
  • mouseover() : 마우스가 요소 안에 들어왔을 때 발생. 
    <button>button</button>
<input />
    $("input").mouseover(function () {
        alert("mouseover");
      });
    //this 사용
$(".container").mouseover(function () {
        $(this).css("background-color", "slateblue");
      });
  • mouseout() : 마우스가 요소에서 나갔을 때 발생.
  • hover() : 요소에 마우스가 올라왔을 때, 떠날 때 발생.

    • 예시 1 : hover 시 버튼 아래 텍스트가 추가

      <button id="btnhover">버튼 클릭!</button>
<p id="hovertext"></p>
      $(function () {
        $("#btnhover").hover(function () {
          $("#hovertext").append("마우스가 버튼 위로 왔다가 나갔어요");
        });
      });

    • 예시 2 : hover시 .container에 텍스트 나타나기.

      $(".container").hover(
        function () {
          $(this).html("<h2>hover 들어왔다</h2>");
        },
        function () {
          $(this).html("<h1>hover 나갔다</h1>");
        }
      );
  • scroll() : 윈도우를 스크롤 할 때 발생.

    • 예시 1 : 스크롤이 바닥에 도달했을 때

      //$(document).height() : document 의 높이를 구할 수 있다.
//document의 높이 - window의 높이 = 현재 스크롤 위치를 알 수 있다. (아래로 내릴 스크롤이 얼마나 남았는지 확인 가능)
//document는 바디, window는 브라우저로 생각
//$(document).height() - $(window).height() == (window).scrollTop()
//이거는 결국 브라우저를 열었을 때 '아래로 내려야 하는 스크롤의 길이'에서 스크롤을 내리면
//'위로 올려야 하는 스크롤의 길이'가 동일해진다. (스크롤이 맨위, 맨 아래에 있을 때 남겨진 높이는 같기 때문)
//이 부분을 활용하는 계산법. 즉 스크롤이 바닥에 도달했을 때 이벤트가 나타나게 되는 것.

$(document).scroll(function () {
        if (
          $(document).height() - $(window).height() ==
          $(window).scrollTop()
        ) {
          console.log("스크롤 바닥에 왔다");
        }
      });

    • 예시 2 : 스크롤 위치에 따라 변경되게 설정.

      <style>
      body {
        height: 1000px;
      }
      p {
        position: fixed;
      }
</style>

<h2>스크롤 테스트</h2>
      $(window).scroll(function () {
        if ($(document).scrollTop() < 10) {
          $("h2").css("backgroundColor", "green");
        } else if ($(document).scrollTop() < 20)
          $("h2").css("backgroundColor", "orange");
        else {
          $("h2").css("backgroundColor", "red");
        }
      });

▶️ 키보드 이벤트

키보드 이벤트의 발생 순서

  1. 키보드를 누른다. keydown 이벤트가 발생한다.
  2. 글자가 입력된다. keypress 이벤트가 발생한다.
  3. 키보드에서 손을 뗀다. keyup 이벤트가 발생한다.
  • keydown() : 키보드가 눌러질 때 발생.
  • keyup() : 키보드가 떼어질 때 발생. 
    $("input[name=pw]").keyup(function (event) {
        // console.log("key: ", event.key);
        if (event.key == "Enter") console.log("value: ", this.value); //여기는 input이 찍힐거고, input의 값이 찍히게 된다.
        if (event.keyCode == "13") console.log("value: ", this.value); //얘랑 위랑 똑같다.
      });
  • 키보드 이벤트 추가 예시

    • 예시 1. <body>에 <input /> 를 넣어주고 아래 테스트.

    • input 입력칸 에 무언가 입력을 하면 console창에 각 정보가 뜬다.

      $("input").on("keyup", function (e) { //e를 입력했다면
        console.log(e); //입력한 값에 대한 정보
        console.log(e.key); //e 출력.
        console.log(e.keyCode); // e의 keycode인 69 출력.
        console.log(e.currentTarget); //현재 요소의 타겟이 어디인지. <input>출력.
        console.log(e.currentTarget.value); // 그 타겟의 값이 보여진다. e 출력.
      });
      $("input").on("keydown", function (e) {
        console.log(e);
        console.log(e.key);
        console.log(e.keyCode);
        console.log(e.currentTarget);
        console.log(e.currentTarget.value);
      });
      $;

    • 주로 쓰이는 키의 번호는 keycode라고 한다.

      $(window).keydown(function(e){
        //13 : enter
        //27 : esc
        //37 : ←
        //38 : ↑
        //39 : →
        //40 : ↓
        //48~57 : left 0~9
        //96~105 : right 0~9

            if(e.keyCode==40||e.keyCode==39){
            // ↓ 나 → 를 눌렀을 때 발생하는 이벤트
    }
          if(e.keyCode==38||e.keyCode==37){
            //↑ 나 ← 를 눌렀을 때 발생하는 이벤트
    }
    if(e.keyCode==27){
            close_guide();
    }
})
 
id 실시간 입력 검사 확인

$("#id").on("propertychange change keyup paste input", function() {

var id = $(this).val();

if(/^[a-z0-9]{4,8}$/.test(id)) { //영문 숫자 4-8자 정도 입력 가능

console.log(/[a-z0-9]{4,8}/.test(id))

$('p.idmsg').text('')

}else{

$('p.idmsg').text('잘못 입력된 값입니다.');

}

 

});


 

 

이 게시물을
목록
쓰기 태그
keyboard_arrow_up