[jQuery] 이벤트

1. 이벤트 등록 메서드

1-1 이벤트 등록 메서드란?

이벤트

사이트에서 방문자가 취하는 모든 행위

이벤트 헨들러

이벤트가 발생했을 때 실행되는 코드

2. 단독 이벤트 등록 및 삭제 메서드, 이벤트 종류

단독 이벤트 등록 메서드란?

대상에 한 가지 동작에 대한 이벤트만 등록함.

기본형

$("이벤트 대상 선택").이벤트등록메서드(function(){
    자바스크립트 코드;
});

• 이벤트 제거 메서드
  off() 메서드를 이용하여 해당 이벤트를 제거함.

  기본형

  $("이벤트 대상").off("제거할 이벤트 종류");

• 강제로 이벤트 발생
  이벤트 핸들러에 의해 자동으로 이벤트가 발생함.

  기본형

  $("이벤트 대상").단독 이벤트 등록 메서드();
  $("이벤트 대상").trigger("이벤트 종류");

2-1. 로딩 이벤트 메서드

• ready() 이벤트 메서드
  사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document의 로딩이 끝나면 이벤트를 발생함.

  기본형

  $(document).load(function(){자바스크립트 코드;});
  $(document).on("load",function(){자바스크립트 코드;});

• load() 이벤트 메서드
  외부에 연동된 소스의 로딩이 끝나면 이벤트를 발생합니다.

  기본형

  $(document).load(function(){자바스크립트 코드;});
  $(document).on("load",function(){자바스크립트 코드;});

• ready()와 load() 실행위치
  1. 웹브라우저 시작
  2. 웹문서 읽기
  3. 문서 객체 모델(DOM) 생성 -> ready() 이벤트 메서드 실행
  4. 이미지 등의 요소들이 로드되기 시작
  5. 페이지 로딩 완료 -> load() 이벤트 메서드 실행

2-2. 마우스 이벤트

• click() 이벤트 메서드
  선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬때 사용함.

  기본형

  $("이벤트 대상 선택").click(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("click",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").click(); // click이벤트 강제 발생

• dblclick() 이벤트 메서드
  선택한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용함.

  기본형

  $("이벤트 대상 선택").dblclick(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("dblclick",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").dblclick(); // dblclick이벤트 강제 발생

• mouseover() 이벤트 메서드
  선택한 요소에 마우스 포인터를 올릴 때마다 이벤트를 발생시키거나 선택한 요소에 mouseover 이벤트를 강제로 발생 시킴.

  기본형

  $("이벤트 대상 선택").mouseover(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("mouseover",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").mouseover(); // mouseover이벤트 강제 발생

• mouseout() 이벤트 메서드
  선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시키거나 선택한 요소에 mouseout 이벤트를 강제로 발생 시킴.

  기본형

  $("이벤트 대상 선택").mouseout(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("mouseout",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").mouseout(); // mouseout이벤트 강제 발생

• hover() 이벤트 메서드
  선택한 요소에 마우스 포인터가 올라갈때와 선택한 요소에서 벗어날 때 각각 이벤트를 발생시키며, 각각 다른 이벤트 핸들러를 실행시킴.

  기본형

  $("이벤트 대상 선택").hover(
    function(){마우스 오버 시 실행될 코드;},
    function(){마우스 아웃 시 실행될 코드;}
   );

• mouseenter() 이벤트 메서드
  대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").mouseenter(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("mouseenter",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").mouseenter(); // mouseenter이벤트 강제 발생

• mouseleave() 이벤트 메서드
  대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").mouseleave(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("mouseleave",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").mouseleave(); // mouseleave이벤트 강제 발생

• mousemove() 이벤트 메서드
  선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생함.

  기본형

  $("이벤트 대상 선택").mousemove(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("mousemove",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").mousemove(); // mousemove이벤트 강제 발생

• scroll() 이벤트 메서드
  대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll이벤트를 발생시키는데 사용함.

  기본형

  $("이벤트 대상 선택").scroll(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("scroll",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").scroll(); // scroll이벤트 강제 발생

• 마우스 이벤트 객체의 속성 종류

  종류	설명
  clientX	마우스 포인터의 X 좌표값 반환(스크롤 이동 거리 무시)
  clientX	마우스 포인터의 Y 좌표값 반환(스크롤 이동 거리 무시)
  pageX	스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌표값을 반환
  pageY	스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌표값을 반환
  screenX	화면 모니터를 기준으로 마우스 포인터의 X 좌표값을 반환
  screenY	화면 모니터를 기준으로 마우스 포인터의 Y 좌표값을 반환
  layerX	position을 적용한 요소를 기준으로 마우스 포인터의 X 좌표값을 반환
  layerY	position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌표값을 반환
  button	마우스 버튼의 종류에 따라 값을 반환(왼쪽:0 휠:1 오른쪽:2)

2-3. 포커스 이벤트

• focus() 이벤트 메서드
  대상 요소로 포커스가 이동하면 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").focus(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("focus",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").focus(); // focus이벤트 강제 발생

• blur() 이벤트 메서드
  포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").blur(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("blur",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").blur(); // blur이벤트 강제 발생

• focusin() 이벤트 메서드
  대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").focusin(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("focusin",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").focusin(); // focusin이벤트 강제 발생

• focusout() 이벤트 메서드
  대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").focusout(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("focusout",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").focusout(); // focusout이벤트 강제 발생

• change() 이벤트 메서드
  선택한 폼 요소의 값을 새값으로 바꾸고 포커스가 다른 요소로 이동하면 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").change(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("change",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").change(); // change이벤트 강제 발생

• 키보드 접근성

  키보드 접근성이란?

  어떤 대상 요소에 마우스 이벤트를 등록했을 때 마수으 없이 키보드로 대상 요소를 사용할 수 있게 하는 것을 말함.
  
  예를들어 마우스 이벤트인 mouseover은 키보드 이벤트인 focus와 대응됨.
  이때 이벤트를 작성하면

  $("이벤트 대상 선택").on("mouseover focus", function(){
      실행할 이벤트 코드;
  });

  이렇게 작성을 할 수 있다.

2-4. 키보드 이벤트

• keydown() 이벤트 메서드
  선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나 해당 이벤트를 강제로 발생시킴. 그리고 한글을 제외한 모든키에 대해서 이벤트를 발생시킴.

  기본형

  $("이벤트 대상 선택").keydown(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("keydown",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").keydown(); // keydown이벤트 강제 발생

• keyup() 이벤트 메서드
  자판의 키를 눌렀다 키에서 손을 때면 이벤트를 발생시키거나 keyup 이벤트를 강제로 발생시킴.

  기본형

  $("이벤트 대상 선택").keyup(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("keyup",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").keyup(); // keyup이벤트 강제 발생

• keypress() 이벤트 메서드
  선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나 해당 이벤트를 강제로 발생시킵니다. 그리고 기능키에 대해서는 이벤트를 발생시키지 않음.

  기본형

  $("이벤트 대상 선택").keypress(function(){자바스크립트 코드;});
  $("이벤트 대상 선택").on("keypress",function(){자바스크립트 코드;});
  $("이벤트 대상 선택").keypress(); // keypress이벤트 강제 발생

• 키보드 이벤트 객체의 속성 종류

  종류	설명
  keyCode	키보드의 아스키 코드값을 반환
  altKey	이벤트 발생 시 Alt 키가 눌렸으면 true, 아니면 false 반환
  ctrlKey	이벤트 발생 시 Ctrl 키가 눌렸으면 true, 아니면 false 반환
  shiftKey	이벤트 발생 시 SHIFT 키가 눌렸으면 true, 아니면 false 반환

2-5. 이벤트가 발생한 요소 추적하기

• $(this) 선택자
  이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할수 있음.

• index() 인덱스 반환 메서드
  이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환함.

  기본형

  $("이벤트 대상 선택").on("이벤트종류",function(){
    $("이벤트 대상 선택").index(this);
  });

2-6 전체 이벤트 객체의 속성 종류

종류	설명
target	이벤트가 전파된 마지막 요소를 가리킴.
cancelBubble	이벤트의 전파를 차단하는 속성, 기본값은 false
stopPropagation()	이벤트의 전파를 차단함.
preventDefault()	기본 이벤트를 차단합니다. 예를 들어 사용자가 a태그에 대한 이벤트를 작성하고 실행시켰을 때 a태그의 기본 이벤트가 실행되지 않게 이 옵션을 사용하여 차단함.

3. 그룹 이벤트 등록/삭제 메서드

그룹 이벤트 등록 메서드란?

대상에 한가지 동작 이상의 이벤트를 등록함.

3-1. 그룹 이벤트 등록 메서드

• on() 메서드
  선택한 요소에 이벤트를 등록하고 이후에도 새롭게 생성되거나 복제된 요소에 이벤트를 적용(라이브 이벤트 등록)할 수 있음.

  방식 1

  $("이벤트 대상 선택").on("이벤트 종류1 이젠트 종류2 ...", function(){
      자바스크립트 코드;
  });

  방식 2

  $("이벤트 대상 선택").on({
    "이벤트 종류1 이젠트 종류2 ...", function(){
      자바스크립트 코드;
    }
  });

  방식 3

  $("이벤트 대상 선택").on({
    "이벤트 종류1": function() {자바스크립트 코드1;},
    "이벤트 종류2": function() {자바스크립트 코드2;},
    ...
  });

  방식 4 (라이브 이벤트 등록 방식)

  $(document / "이벤트 대상의 상위 요소 선택").on("이벤트 종류", "이벤트 대상 선택", function(){
      자바스크립트 코드;
  });

• bind() 메서드
  요소에 이벤트 핸들러를 추가함.

  기본형

  $("이벤트 대상 선택").bind("이벤트 종류", function(){
    자바스크립트 코드;
  });

• delegate() 메서드
  선택한 요소의 하위 요소에 이벤트를 등록합니다. 라이브 이벤트 등록 방식으로 나중에 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록함.

  기본형

  $(document / "이벤트 대상의 상위 요소 선택").delegate("이벤트 대상 요소 선택", "이벤트 종류", function(){
      자바스크립트 코드;
  });

• one() 메서드
  이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거됨. (일회성 이벤트)

  기본형

  $("이벤트 대상 선택").one("이벤트 종류", function(){
      자바스크립트 코드;
  });

  라이브 이벤트 등록 방식

  $(document / "이벤트 대상의 상위 요소 선택").one("이벤트 종류", "이벤트 대상 선택", function(){
    자바스크립트 코드;
  });

3-2. 이벤트 제거 메서드

• off() 메서드
  on() 메서드로 등록한 이벤트를 제거함.

  기본방식

  $("이벤트 대상 선택").off("이벤트 종류");

  라이브 이벤트 제거 방식

  $(document / "이벤트 대상 상위 요소 선택").off("이벤트 종류", "이벤트 대상 요소 선택");

• unbind() 메서드
  bind() 메서드로 등록한 이벤트를 제거함.

  기본방식

  $("이벤트 대상 선택").unbind("이벤트 종류");

• undelegate() 메서드

  기본방식

  $("이벤트 대상 선택").undelegate("이벤트 종류");

  라이브 이벤트 제거 방식

  $(document / "이벤트 대상 상위 요소 선택").undelegate("이벤트 대상 요소 선택", "이벤트 종류");