jQuery - event

* 다양한 이벤트 함수들
1. 마우스 관련 이벤트
- click   ( ↓,↑  / 왼쪽 버튼만)
- dblclick   (왼쪽 버튼만)
- mousedown  (↓ 모든 버튼)
- mouseup    (↑ 모든 버튼)
- mouseenter 마우스 올려놓으면
- mouseleave 마우스 올려져 있다가 나가면 

2. 키보드 관련 이벤트
- keydown
- keypress   (keydown과 비슷: ALT, CTRL, SHIFT, ESC 등의 키에는 동작 안함 )
- keyup

3. 폼 관련 이벤트
- submit
- change
- focus
- blur

4. Document/Window 관련 이벤트
- load
- resize
- scroll
- unload

* 대부분의 jQuery '이벤트 함수'들이 위 DOM 이벤트들과 1:1 대응됨. (100%는 아님)

$("p").click(function(){
  // action goes here!!
});

* jQuery 이벤트 함수의 매개변수가 '함수' 임에 유의

※ 크롬 개발자 도구에서 EventListener 확인 가능

 이벤트 함수들
 $(document).ready()    :  

---

$(document).ready(function(){

 

* 클릭하면(click())사라지게 하기

$("#p01").click(function(){
    $(this).hide();
});

* 더블클릭하면(dblclick()) 사라졌던게 나타나기
$("#p02").dblclick(function(){
    $("#p01").slideDown();
});

* 마우스 올려놓으면 (mouseenter())
$("#p03").mouseenter(function(){
    $(this).html("<b>mouse가</b> 올려짐")
});

* 마우스 올려져 있다가 나가면 (mouseleave())
$("#p04").mouseleave(function(){
    $(this).text("마우스 빠짐");
});

* 마우스 눌려지면 (mousedown())
$("#p05").mousedown(function(){
    $(this).css('color', 'red');
});

* 마우스 눌렸다 떼지면 (mouseup())
$("#p06").mouseup(function(){
    $("#img").attr("src", "../img/example_img_girl.jpg");
});

* hover(func1, func2)  : mouseenter 와 mouseleave 롤 동시에 처리
 마우스가 들어오면 배경색 노랑색으로 마우스가 나가면 배경색 cyan 색으로

$("#p07").hover(function(){
    $(this).css("background-color", 'yellow');
        }, function(){
    $(this).css("background-color", 'cyan');
});

* focus() 되면 배경색을 노랑색으로 바꾸세요.
$("#p08").focus(function(){
    $(this).css("background-color", "yellow");
        $(this).val("focus됨");
});

* blur() 되면 배경색을 다시 하얀색으로 바꾸기
$("#p08").blur(function(){
    $(this).css("background-color", "#fff");
        $(this).val("blur 됨");
});

* on(이벤트, func) 

  on({이벤트1:func1, 이벤트2:func2, ... }) 여러 이벤트 핸들러 지정
$("#p09").on("click", function(){
    $(this).fadeOut(5000);
});

$("#p10").on({
    mouseenter: function(){
        $(this).css("background-color", 'lightgray');
    },
    mouseleave: function(){
        $(this).css("background-color", 'tomato');
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
    
 * off() 는 해당 element 의 특정 이벤트 제거
  $("#btnOff").click(function(){
       $("#p10").off("click");   // click 이벤트 제거
  });
    
 * 대부분의 jQuery action함수들은 메소드 체이닝(chaining)됨

   $("#p11")
      .mouseenter(function(){
          $(this).css("background-color", "Salmon")
     })
     .mouseleave(function(){
         $(this).css("background-color", "Aquamarine")
    })
    .click(function(){
         $(this).css("background-color", "yellow")
    })
     .text("P11 메소드 체이닝")
     ;
    }); 

---