[jQuery] 09. 이벤트

이벤트 핸들러(이벤트발생시 실행될 function) 연결 방법 종류

방법1. 이벤트 메소드를 통한 연결

• $("선택자").이벤트메소드(function(){ 해당 요소에 해당 이벤트 발생시 실행할 내용; });

<h4 id="test1">클릭해보세요</h4>

<script>
  $(function(){ // 클릭이벤트
    $("#test1").click(function(){
      $(this).html("클릭되었습니다!!");
    });

    $("#test1").dblclick(function(){
      $(this).css("color", "red");
    });
  })
</script>

---

방법2. on메소드를 이용한 방법

• $("선택자").on("이벤트명", function(){ 해당 요소에 해당 이벤트 발생시 실행할 내용; });
• on 메소드를 통해 이벤트 연결시 한 요소에 다중으로 이벤트걸기 가능

<h4 id="test2">마우스 클릭 및 올려보세요</h4>

<script>
  $(function(){
    /*
    $("#test2").on("click", function(){
    $(this).css("backgroundColor", "orangered").text("클릭됨");
    });
    */

    // on메소드를 통해 이벤트 연결시
    // 한 요소에 다중으로 이벤트걸기 가능함
    $("#test2").on({"mouseenter":function(){
      $(this).css("backgroundColor", "yellowgreen").text("마우스 올라감");
    }, "mouseout":function(){
      $(this).css("background", "yellow").text("마우스 빠져나감");
    }, "click":function(){
    // click이라는 이벤트 발생시 실행할 내용
    // => 기존에 걸려있던 mouseenter, mouseout 이벤트 핸들러 제거
    // off메소드 : 이벤트 핸들러 제거
    $(this).off("mouseenter").off("mouseout").css("backgroundColor", "orangered").text("이벤트 제거됨");
    }});
  })
</script>

---

방법3.

• $("상위요소선택자").on("이벤트명","하위요소선택자",function(){
            선택된 상위요소 안에 존재하는 해당 하위요소에 해당 이벤트가 발생했을때 실행할 내용;
  })
• 동적으로 만들어진 요소에도 동일한 이벤트를 적용시키고자 한다면 반드시 방법3 사용
  • 동적으로 만들어진 요소 : 처음에 문서 로딩시에는 없다가 나중에 새로이 만들어지는 요소

<div id="wrap2" style="border: 1px solid red;">
  <h6>기존에 존재하는 요소</h6>
</div>

<script>
  $(function(){

    // 방법1. 이벤트메소드  => 동적으로 만들어진 요소에 이벤트 적용안됨
    /*
    $("#wrap2>h6").click(function(){
      $("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
    });
    */

    // 방법2. on메소드      => 동적으로 만들어진 요소에 이벤트 적용안됨
    /*
    $("#wrap2>h6").on("click", function(){
      $("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
    })
    */

    // 방법3.               => 동적으로 만들어진 요소에도 이벤트 적용됨!!
    $("#wrap2").on("click"," h6", function(){
      $("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
    })

  })
</script>

• 방법1, 방법2는 이벤트가 적용 X → 클릭으로 인해 만들어진 요소를 클릭하면 새 요소가 만들어지지 않음
• 방법3은 이벤트가 적용O → 새 요소를 클릭하면 또다른 새 요소가 만들어짐

---

일회성 이벤트

• 이벤트를 딱 한번만 연결할 때 사용
• $(선택자).one("이벤트명", function(){ 해당 요소에 해당 이벤트 발생시 실행할 내용; });

---

키보드 관련 이벤트

• keydown / keypress : 키가 눌려질때 발생하는 이벤트
  • keydown : 키보드의 모든 키가 눌려질때 발생됨
  • keypress : 키보드의 펑션키, 기능키, 한글 제외한 나머지 키가 눌려질때
• keyup : 키가 떼어질때 발생하는 이벤트