[JQuery] 이벤트 다루기

※이벤트의 종류

1. 마우스 이벤트 : 마우스를 사용했을 때 발생하는 이벤트
2. 키보드 이벤트 : 키보드를 눌렀을 때 발생하는 이벤트
3. 태그요소 고유 이벤트 : 엘리먼트마다 발생하는 고유 이벤트 

        ex)<img> 태그요소의 이미지가 모두 로드되면 load 이벤트를 발생시켜 이미지 다운이 완료됐음을 알리거나

               <input> 태그요소의 경우 입력한 정보가 바뀌면 change 이벤트를 발생시켜 입력정보 변경을 알림

4. 사용자 정보 이벤트 : 개발자가 직접 만들어 사용하는 이벤트

         

※일반 이벤트 등록

$대상.on("이벤트이름", 이벤트리스너)

ex) $("#btn").on("click", function(){

         alert("버튼클릭"); 

    });

※ 단축 이벤트 등록

$대상.단축이벤트(이벤트리스너)

ex) $("#btn").click(function(){

         alert("버튼클릭"); 

    });

※ 등록한 이벤트 제거

$대상.off("click", 삭제하고 싶은 이벤트 리스너 명) -> 삭제하고 싶은 이벤트만 제거

$대상.off("click") -> 특정 이벤트만 제거

$대상.off() -> 모든 이벤트 제거

※ 이벤트 한번만 실행

$대상.one("이벤트이름", 이벤트리스너)

ex) $("#btn").one("click", function(){

          alert("버튼클릭");

    });

※ 기본 행동 취소 

 기본행동이란 <a herf="링크"> 클릭시 click 이벤트 발생 후 해당 링크로 이동하게 되는데 이러한 행동을 기본 행동이라고 한다.

모든 이벤트가 기본 행동을 취소할 수 있는것은 아니다.

이벤트 발생 후 실행되는 기본 행동이 있는지 알려면 발생한 이벤트 객체의 cancelable 프로퍼티 값을 확인하면 된다.

이 값이 true인 경우 이벤트 실행 후 기본 행동이 실행된다는 의미이다.

event.preventDefault()

ex) $("#hrefLink").on("click", function(e){

         alert("링크 클릭");

         e.preventDefault();

    });

※ 이벤트 발생 시키기

 실제 마우스를 클릭하지 않았지만 클릭한 것처럼 특정 노드에서 수동으로 이벤트를 발생시켜야 하는 경우 사용

$(document).ready(function(){

     $("#btn").trigger("click");

     

     $("#btn).on("click", function(){

          alert("버튼 클릭");

     });

});

※ 사용자 정의 이벤트 만들기

 개발자들의 경우 개발 실력이 어느 정도 수준에 이르게 되면 자신만의 라이브러리를 만들어 사용하게 된다. 이때 라이브러리만의 고유 이벤트도 만들게 된다.

방법1

var event = jQuery.Event("이벤트이름");

[event.data1 = 값;

event.data2 = 값

.....]

$대상.tirgger(event)

ex) 

$(document).ready(function(){

$("#btn").click(function(){

      var $item = $("#item"); 

//이벤트 객체 생성

var event = jQuery.Event("makeEvent");

//이벤트 데이터 생성

event.item = $itme;

event.itemName = "itemName";

event.itemLength = $item.length;

//이벤트발생

     $menu.trigger(event);

});

$menu.on("makeEvent", function(e){

     e.item, e.itemName, e.itemLength를 이용하여 이벤트 동작 구현

})

)};

방법2

var event = jQuery.Event("이벤트이름");

$대상.trigger(event [,data1 = 값, data2 = 값.....]);

ex)

$(document).ready(function(){

$("#btn").click(function(){

var $item = $("#item");

//이벤트 객체 생성

var event = jQuery.Event("makeEvent");

//이벤트 데이터 생성

var data = [$item, "itemName", $item.length];

//이벤트발생

     $menu.trigger(event, data);

});

$menu.on("makeEvent", function(e, item, itemName, itemLength){

     item, itemName, itemLength 파라미터를 이용하여 이벤트 동작 구현

})

});