[JQuery 요약 정리] 4. 이벤트 처리

4. 이벤트 처리

1) on() 메소드

- 이벤트를 연결하는 메소드

- 형태

$('선택자').on('이벤트명', function(event){이벤트 내용})

$('선택자').on({이벤트명1:이벤트함수1, 이벤트명2:이벤트함수2})

- 예시

$('#btn1').on('click', function(){alert('클릭이벤트');}); -> btn1에 클릭 이벤트 연결

* 이벤트 함수 내 return false; 추가시 상위 태그로의 이벤트 연결을 막을 수 있음

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(); <- 이벤트 발생 객체를 범위로 한정

});

* $(this).find('h1').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) 를 이용해서 이벤트 범위 한정 가능

- 상위 태그에 범위 한정 이벤트를 설정함으로써 새로 추가될 객체에도 이벤트 추가 가능

- off(types, selecter)를 통해 범위 한정 이벤트 삭제도 가능

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 버튼 클릭시 발생

*입력양식의 유효성 검사시 기본이벤트를 제거해야함

* prop('checked', true) 메소드는 체크상태를 바꿀 때 사용

13) 그 외

- 이벤트 생성시 람다식(=>) 사용시에 this가 윈도우를 가리킴

- this 대신 event.currentTarget 속성 사용

- 그 외의 이벤트 알아보기: https://api.jquery.com/category/events/event-object/