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('구분자');

results matching ""

    No results matching ""