이벤트란 프로그램이 겪는 어떠한 사건을 뜻합니다. 사용자의 클릭, 마우스 오버, 페이지 로딩 직후, 페이지 종료 직전 등의 상황이 이벤트에 해당합니다. 자바스크립트와 jQuery는 다양한 이벤트를 감지하는 기능이 구현되어 있기 때문에 우리는 해당 이벤트가 발생했을 때 웹 페이지가 어떻게 동작할지에 대한 내용만 별도의 함수로 구현하여 콜백처리하면 됩니다.

#01. 이벤트를 처리하는 방법

1) 이벤트 핸들러

HTML 태그의 속성 형태로 존재하는, 이벤트 발생시 실행할 자바스크립트 코드 영역

Javascript가 고도화 됨에 따라 HTML과 Javascript 코드를 분리하는 경향이 생기면서 이벤트 핸들러는 거의 사용되지 않는 추세.

<태그이름 on이벤트이름="...JS코드영역..."></태그이름>

2) 이벤트 리스너

어떤 이벤트가 발생하기를 기다리고 있다가 이벤트 발생시 연결된 함수를 호출해 주는 기능.

이벤트를 감지하는 것은 Javascript 안에 이미 내장되어 있지만 어떤 이벤트가 발생했을 수행할 동작은 웹 페이지마다 다를 수 밖에 없으므로 미리 구현해 놓을 수 없다. (페이지마다 개별 구현이 필요함)

이벤트를 감지하는 기능이 수행할 동작을 콜백함수로 요구한다.

바닐라JS의 이벤트 리스너

객체.addEventListener('이벤트이름', 콜백함수);

jQuery의 이벤트 리스너

객체.on("이벤트이름", 콜백함수);

#02. jQuery 이벤트 종류

마우스 이벤트

이벤트	설명
click *	마우스를 클릭할 때
dblclick	마우스를 더블클릭할 때
mousedown	마우스 버튼을 누를 때
mouseup	마우스 버튼을 뗄 때
mousemove	마우스를 움직일 때
mouseenter *	마우스를 요소 안에 들어올 때
mouseleave *	마우스가 요소를 벗어날 때

키보드 이벤트

이벤트	설명
keydown	키보드가 눌러질 때
keypress	글자가 입력될 때
keyup *	키보드가 떼어질 때

윈도우 이벤트

이벤트	설명
ready	문서 객체가 준비를 완료함
load	윈도우(문서 객체)를 불러들일 때
unload	윈도우(문서 객체)를 닫을 때
resize	윈도우의 크기를 변화시킬 때
scroll *	윈도우를 스크롤할 때
error	에러가 있을 때

입력 양식 이벤트

이벤트	설명
change *	입력 양식의 내용을 변결 되었을 때(checkbox, radio, select)
focus	입력 양식 포커스가 맞춰졌을 때
blur	입력 양식에 포커스이 사라지면
submit	submit 버튼을 누르면
reset	reset 버튼을 누르면

#03. scroll 이벤트를 사용한 인피니티 스크롤 구현하기

1) width(), height() 함수

특정 요소의 크기

var w = $("#foo").width();
var h = $("#foo").height();

웹 페이지 전체의 크기

var w = $(document).width();
var h = $(document).height();

브라우저의 크기

var w = $(window).width();
var h = $(window).height();

2) 스크롤바의 위치

var top = $(window).scrollTop();

3) 인피니티 스크롤

// jQuery의 load처리 안에서 정의
$(window).on("scroll", () => {
    if ( $(window).scrollTop() + $(window).height() == $(document).height() ) {
        ... 스크롤이 맨 밑에 도착한 경우의 처리 ...
    }
});

#04. resize 이벤트를 사용한 반응형 기능

브라우저 크기에 반응하여 동작하는 함수를 정의하고 브라우저가 열린 직후와 창 크기가 변경될 때 동작하도록 호출한다.

function responsive() {
    // 현재 창의 넓이
    var w = $(window).width();

    if (w >= ?) {
        ... 반응형 기능 구현 ...
    }
}

// 브라우저가 열린 직후
responsive();

// 리사이즈 이벤트 정의
$(window).on("resize", () => {
    // 창 크키가 변경될 경우
    responsive();        
});

호쌤코딩클럽

[jQuery] 이벤트 처리