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