jQuery 이벤트

키보드 이벤트

이벤트 명	설명
keydown	키보드가 눌러질 때 발생
keypress	글자가 입력될 때 발생
keyup	키보드가 떼어질 때 발생

윈도우 이벤트

이벤트 명	설명
ready	문서 객체가 준비를 완료할 때 발생
load	문서 객체를 불러들일 때 발생
unload	문서 객체를 닫을 때 발생
resize	창 크기 변화할때 발생
scroll	스크롤 할때 발생
error	에러가 있을 때 발생

이벤트 전달 제어

이벤트 명	설명
preventDefault()	기본 이벤트(`<a>`의 링크 이동, submit 버튼의 submit 기능 등)를 제거
stopPropagation()	이벤트 전달을 제거

preventDefault()는 해당 동작의 실행 자체를 막아버리고,
stopPropagation()은 상위 객체에서의 해당 동작의 실행을 막는다 (지정한 놈에서만 지정된 동작이 실행되도록 제한함)

event bubbling 자손 엘리먼트부터 이벤트를 발생시킴. 예를 들어, 이런 HTML 코드가 있으면

<section>
  <div>
    <h2>
    </h2>
  </div>
</section>

h2 -> div -> section 순으로 이벤트 발생

event capturing 위의 HTML 코드 그대로 가져다 쓰면, 아래와 같이 이벤트가 발생됨.
section -> div -> h2 순으로 이벤트 발생.
만악의 근원 IE에서는 지원 안됨.

마우스 이벤트

이벤트 명	설명
click	마우스 클릭시 발생
dblclick	마우스 더블클릭시 발생
mousedown	마우스 버튼 누를 때 발생
mouseup	마우스 버튼 뗄 때 발생
mouseenter	마우스가 요소 경계 외부에서 내부로 이동할 때 발생
mouseleave	마우스가 요소의 경계 내부에서 외부로 이동할 때 발생
mousemove	마우스 움직일 때 발생
mouseout	마우스가 요소 벗어날 때 발생
mouseover	마우스가 요소 안에 들어올 때 발생

무한 스크롤

$(window).scroll(function() {
  var itemNo = 0;
  var documentHeight = $(document).height();
  var scrollHeight = $(window).height() + $(window).scrollTop();

  if(scrollHeight >= documentHeight) {
    for(var i=0; i<10; i++) {
      $('<h1>New item '+itemNo+'</h1>').appendTo('body');
    }
  }
});

입력 양식 이벤트

이벤트 명	설명
change	입력 양식의 내용을 변경할 때 발생
focus	입력 양식에 초점을 맞추면 발생
focusin	입력 양식에 초점이 맞춰지기 직전 발생
focusout	입력 양식에 초점이 사라지기 직전 발생
blur	입력 양식에 초점이 사라지면 발생
select	입력양식을 선택할 때 발생 (input[type=text], textarea 제외)
submit	submit 버튼을 누르면 발생
reset	reset 버튼을 누르면 발생

이벤트 통합 메서드

기존의 .bind() 메소드로도 해결할 수 없는 문제가 있다. 예를 들어, 새로 생성한 객체에도 이벤트를 지정하고 싶은데 그럴수가 없다거나...
그래서, jQuery에서는 다음과 같이 기괴한 메소드 들을 지원한다.

이벤트 명	설명
on()	이벤트를 연결
off()	이벤트를 제거

이중에서 .on()을 조금 더 보면, 이놈은 3개의 메소드 들이 합쳐져 있다. (bind(), live(), delegate())

<div>
  <h2>Click here to clone me!</h2>
</div>

on()으로 bind() 구현

$(document).ready(function() {
  $('h2').on('mousedown', function(event) {
    switch(event.which) {
      case 1:
        $(this).clone().css('color', 'red').appendTo('div');
        break;
      case 3:
        $(this).clone().css('color', 'blue').prependTo('div');
        break;
      case 2:
        $(this).clone().css('color', 'green').insertAfter('div');
        break;
    }
  });
});

on()으로 live() 구현

$(document).ready(function() {
  $(document).on('mousedown', 'h2', function(event) {
    switch(event.which) {
      case 1:
        $(this).clone().css('color', 'red').appendTo('div');
        break;
      case 3:
        $(this).clone().css('color', 'blue').prependTo('div');
        break;
      case 2:
        $(this).clone().css('color', 'green').insertAfter('div');
        break;
    }
  });
});

bind()와 다르게 document 전체를 넘기고 그 중에서 h2를 찾는 형태를 띈다.

on()으로 delegate() 구현

$(document).ready(function() {
  $('div').on('mousedown', 'h2', function(event) {
    switch(event.which) {
      case 1:
        $(this).clone().css('color', 'red').appendTo('div');
        break;
      case 3:
        $(this).clone().css('color', 'blue').prependTo('div');
        break;
      case 2:
        $(this).clone().css('color', 'green').insertAfter('div');
        break;
    }
  });
});

bind()와 다르게 div를 넘기고 그 중에서 h2를 찾는 형태를 띈다.

이건 여담으로

localStorage 웹브라우저의 저장공간 안에 데이터를 저장함.
데이터 저장하기 :

localStorage.setItem('구분자', '저장할 내용');

데이터 복구하기(불러오기) :

localStorage.getItem('구분자');

이벤트 II