1) on() 메소드
이벤트를 연결하는 메소드
형태
$('선택자').on('이벤트명', function(event){이벤트 내용})
$('선택자').on({이벤트명1:이벤트함수1, 이벤트명2:이벤트함수2})
$('#btn1').on('click', function(){alert('클릭이벤트');}); -> btn1에 클릭 이벤트 연결
2) 한가지 이벤트를 바로 연결
형태 $('선택자').이벤트명(function(event) {});
이벤트의 종류
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, ready
3) hover() 메소드
mouseenter와 mouseleave 이벤트를 동시에 연결
형태
$('선택자').hover(function(event) {}, function(event) {});
4) off() 메소드
이벤트를 제거
형태
$('선택자').off() -> 해당 객체와 관련된 모든 이벤트 제거
$('선택자').off('이벤트명') -> 해당 객체의 특정 이벤트와 관련된 모든 이벤트 제거
$('선택자').off('이벤트명', function) -> 특정 이벤트 리스너 제거
5) 그 외의 이벤트 처리
one() : 이벤트를 한 번만 실행하도록 연결(on()과 같은 방법으로 사용)
이벤트 처리 시 jQuery함수 내에 두 개의 매개변수를 사용해서 범위 제한 가능
ex. $('div').click(function() {
var header= $('h1', this).text(); <- 이벤트 발생 객체를 범위로 한정
});
6) 자주 사용하는 jQuery 이벤트 객체
모든 웹브라우저에서 같은 방법으로 사용 가능
종류
event.pageX : X좌표 위치(브라우저 화면 기준)
event.pageY : Y좌표 위치(브라우저 화면 기준)
event.preventDefault() : 기본 이벤트 제거
-> ]] a 태그와 같이 기본 이벤트가 내장된 태그의 이벤트 제거
event.stopPropagation() : 이벤트 전달을 제거
-> 상위 태그로의 이벤트 전달 제거
7) trigger() 메소드
이벤트를 강제로 발생시키는 메소드
형태
$('선택자').trigger(eventName)
$('선택자').trigger(eventName, data)
8) 이벤트 범위 한정
on()의 매개변수는 총 5개(types, selector, data, fn, one)
총 3개의 매개변수(types, selector, data) 를 이용해서 이벤트 범위 한정 가능
상위 태그에 범위 한정 이벤트를 설정함으로써 새로 추가될 객체에도 이벤트 추가 가능
9) 마우스 이벤트
click : 클릭
dblclick : 더블클릭
mousedown : 버튼 누를 때
mouseup : 버튼 뗄 때
mouseenter : 요소의 경계 외부에서 내부로 진입할 때
mouseleave : 요소의 경계 내부에서 외부로 나갈 때
mousemove : 움직일 때
mouseout : 요소를 벗어날 때
mouseover : 요소 안에 들어올 때(이벤트 버블링 적용)
*mouserover 이벤트는 거의 사용하지 않고 mouseenter 이벤트를 주로 사용함
10) 키보드 이벤트
keydown : 키보드를 누를 때
keyup : 키보드를 뗄 때
keypress : 글자가 입력될 때(한글을 지원하지 않음)
11) 윈도우 이벤트
ready : 객체 준비 완료시 발생
load : 객체를 불러들일 때 발생
unload : 객체를 닫을 때 발생
resize : 객체의 크기를 변화시킬 때 발생
scroll : 객체를 스크롤할 때 발생
error : 에러가 있을 때 발생
12) 입력양식(form) 이벤트
change : 내용 변경시 발생
focus : 입력 양식에 포커스가 맞출 때 발생
focusin : 포커스가 맞춰지기 직전에 발생
focusout : 포커스가 사라지기 직전에 발생
blur : 초점이 사라지면 발생
selet : 입력 양식을 선택할 때 발생
submit : submit 버튼 클릭시 발생
reset : reset 버튼 클릭시 발생
*입력양식의 유효성 검사시 기본이벤트를 제거해야함
13) 그 외
이벤트 생성시 람다식(=>) 사용시에 this가 윈도우를 가리킴
this 대신 event.currentTarget 속성 사용
그 외의 이벤트 알아보기: https://api.jquery.com/category/events/event-object/