이벤트 다루기

이벤트란?

 

이벤트란 일종의 알림 기능이다.

• 사용자가 마우스를 클릭하거나 키보드 키를 입력하면 브라우저는 입력정보를 이벤트에 담아 개발자에게 알려준다.

 

이벤트 종류

 

크게 네 가지 종류로 분류할 수 있다.

• 마우스 이벤트
• 키보드 이벤트
• 태그요소 고유 이벤트
• 사용자 정의 이벤트

 

핵심 내용

 

• 일반 이벤트 등록
  

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

   
• 단축 이벤트 등록
  

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

  - 단축 이벤트 목록
    ▷ click : 클릭했을 경우
    ▷ mouseup : 마우스에서 손가락을 땐 순간
    ▷ mousedown : 마우스를 누르는 순간
    ▷ mouseover : 마우스를 올렸을 때
    ▷ mouseout : 마우스가 빠져나갔을 때
    ▷ focus : 커서가 이동했을 때
    ▷ blur : 커서가 빠져나갔을 때
    ▷ [마우스를 올렸을 때]
        - mouseover : 자식 태그를 타깃으로 인지
        - mouseenter : 자식태그를 인지 X
    ▷ [마우스를 벗어났을 때]
        - mouseout : 자식태그를 타깃으로 인지
        - mouseleave : 자식태그를 인지 X
    ▷ hover : mouseenter / mouseleave
        - $('.box2').hover(function(){}, function(){})
    ▷ on : 여러개의 동작을 했을 때, 동일한 함수를 실행시킬 때 사용

 

cf) mouseover vs. mouseenter 차이점
    - mouseover / mouseout
      : 마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트이다. 만약 내부에 자식 노드가 있는 경우 자식 노드에서도 이벤트가 발생한다. 즉, 자식 노드는 독립적인 노드로 처리된다.
    - mouseenter / mouseleave
      : 마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트이다. 만약 내부에 자식 노드가 있는 경우 자식 노드에서는 이벤트가 발생하지 않는다. 즉, 자식 노드는 부모 노드의 일부분으로 처리된다. 

 

• 등록한 이벤트 제거
  

  // 특정 이벤트에 대한 리스너를 제거하고 싶은 경우
  $대상.off("click", 삭제하고 싶은 이벤트 리스너 명)
  
  // 특정 이벤트에 걸려있는 모든 이벤트 리스너를 제거하고 싶은 경우
  $대상.off("click")
  
  // 모든 이벤트 종류에 상관없이 모든 이벤트를 제거하고 싶은 경우
  $대상.off()

• 이벤트 한 번만 생성
  

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

  - 등록한 이벤트 리스너는 딱 한번 실해되고 자동으로 제거된다.
• 기본 행동 취소
  

  event.preventDefault()​

  - 기본 행동이란 <a href="링크"> 태그 클릭 시 click 이벤트 발생 후 해당 링크로 이동하게 되는데 이런 행동을 기본 행동이라고 한다.
  - preventDefault() 메서드 대신 "return false"를 이용해도 가능하다.
• 버블링 멈추기
  

  event.stopPropagation()​

  - 버블링이란 이벤트 흐름의 마지막 단계의 흐름으로써 이벤트를 발생한 노드의 조상 노드를 따라 최상위 노드인 document 객체까지 흐르게 된다.
• 하나의 이벤트 리스너로 여러 이벤트 처리하기
  

  $대상.on("이벤트명","선택자",이벤트 리스너)​

  $('.box3').on({
  	'mouseover focus' : function(){
  		console.log('mouseover focus');
  	}, 
  	'mouseout blur' : function(){
  		console.log('mouseout blur');
  	}
  })

• 이벤트 발생시키키
  

  $대상.trigger("이벤트이름")​

  - 수동으로 이벤트를 발생시킬 수 있다.
• 사용자 정의 이벤트 만들기
  

  // 방법1
  var event = jQuery.Event("이벤트이름");
  [event.데이터1 = 값;
  event.데이터2 = 값;
  ...]
  $대상.trigger(event)
  
  // 방법2
  var event = jQuery.Event("이벤트이름");
  $대상.trigger(event[,데이터1=값, 데이터2=값,...]);​