jQuery Event 관련 정리

jQuery Event

이벤트 메서드

on()메서드는 모든 이벤트를 처리 할 수 있다.
내부적으로 jQuery는 크로스 브라우저 이슈를 모두 고려 한다.

.on() 메서드는 1.7 버전에서 처음 도입 되었고, 사용하는 방법은 jQuery가 제공하는 다른 메서드를 사용하는 방법과 크게 다르지 않다.
그 전에는 .click() 이나 .focus() 메서드를 제공 했으나 이제는 .on()메서드만 사용해야 한다.

$('li').on('click', function() {
  $(this).addClass('complete');
});

.on()메서드를 이용하여 이벤트를 처리 한다. 이 메서드는 두 개의 매개변수를 필요로 한다.
첫 번째 매개변수로는 대응 할 이벤트를 지정한다. 여기서는 click이벤트를 처리한다.

아래 표에 정리 된 이벤트들은 .on() 메서드를 통해 주로 처리 하는 이벤트이다.

사용처	이벤트 명
UI	focus, blur, change
키보드	input, keydown, keyup, keypress
마우스	click , dblclick, mouseup , mousedown, mouseover, mousemove, mouseout, hover
폼	submit, select, change
문서	ready, load, unload
브라우저	error, resize, scroll

Event 객체

모든 이벤트 처리 함수는 event 객체를 전달 받는다.
이 객체는 발생한 이벤트와 관련된 메서드와 속성을 가지고 있다.

$('li').on('click', function(e) {
    eventType = e.type;
});

위 처럼 사용하면 된다.

속성	설명
type	이벤트의 종류( 예를 들면, click, mouseover 등 )
which	눌려진 버튼이나 키
data	이벤트가 발생했을 때 함수에 전달 된 추가 정보들을 가지고 있는 객체 표현식
target	이벤트가 발생한 DOM 요소
pageX	뷰포트의 왼쪽 모서리로부터 마우스까지의 위치
pageY	뷰포트의 상단으로부터 마우스까지의 위치
timeStamp	유닉스 시간 값 ( 1970년 1월 1일 기준 ~ 현재 ) 파이어폭스는 지원하지 않는다.

메소드	설명
.preventDefault()	기본 동작을 취소한다.
.stopPropagation()	상위 객체로 이벤트가 버블링 되는 것을 중단 한다.

효과

jQuery를 사용하면, 효과 메서드를 통해 변형 과 이동을 이용하여 웹 페이지를 더욱 개선할 수 있다.

기본 효과

메소드	설명
.show()	선택 된 아이템을 보이게 한다.
.hide()	선택 된 아이템을 숨긴다.
.toggle()	선택 된 아이템을 보이거나 숨기는 효과를 번갈아 적용 한다.

페이드 효과

메소드	설명
.fadeIn()	선택 된 요소를 불투명하게 만들어 페이드 인 효과 적용
.fadeOut()	선택 된 요소를 투명하게 만들어 페이드 아웃 효과 적용
.fadeTo()	선택 된 요소의 불투명도를 조절한다.
.fadeToggle()	선택 된 요소의 불투명도를 조정하여, 숨기거나 보이게 한다.

슬라이딩 효과

메소드	설명
.slideUp()	선택 된 아이템에 슬라이드 되어 사라지는 효과를 적용
.slideDown()	선택 된 아이템에 슬라이드 되어 나타나는 효과를 적용
.slideToggle()	선택 된 요소에 슬라이드 효과를 적용하여 나타나거나 사라지게 함

임의 효과

메소드	설명
.delay()	큐 내의 다음 아이템의 실행을 잠시 지연 시킴
.stop()	현재 실행 중인 애니메이션을 중단 함
.animate()	새로운 임의의 애니메이션을 생성 함

DOM 탐색하기

셀렉터가 필요한 메소드

메소드	설명
.find()	현재 객체 집합에서 셀렉터와 일치하는 요소들을 리턴한다.
.closest()	셀렉터와 일치하는 가장 근접한 상위 요소를 리턴한다.

셀렉터가 선택적인 메소드

메소드	설명
.parent()	현재 객체집합의 직계 부모 요소를 리턴한다.
.parents()	현재 객체집합의 모든 부모 요소를 리턴한다.
.children()	현재 객체집합의 모든 자식 요소를 리턴한다.
.siblings()	현재 객체집합의 모든 이웃 요소를 리턴한다.
.next()	현재 요소의 다음 이웃 요소를 리턴한다.
.nextAll()	현재 요소의 다음 이웃 요소들을 모두 리턴한다.
.prev()	현재 요소의 이전 이웃 요소를 리턴한다.
.prevAll()	현재 요소의 이전 이웃 요소들을 모두 리턴 한다.

출처 : 존 두켓 - 인터랙티브 웹 프론트엔트 교과서 자바스크립트 & 제이쿼리

​