JavaScript DOM Event 핸들링

🗓2020년 03월 05일 ∙ 🖊TutorialPost ∙ ⏳5분

자바스크립트에서 이벤트는 다양한 상황에서 발생합니다. 마우스 클릭, 키보드 프레스 이벤트 뿐 아니라, 페이지 로딩, 스크롤, 요소 선택 등 다양한 상황에서 이벤트가 발생하며, 이러한 이벤트를 다루어 사용자와 인터랙션하는 웹을 만드는 것이 웹브라우저에서 동작하는 자바스크립트의 중요한 역할입니다.

이벤트 발생 시점

이벤트는 다양한 상황에서 발생합니다. 간단하게 이벤트 발생 시점에 대해 정리해 보겠습니다.

  • UI 이벤트

    • load - 페이지와 기타요소들의 로딩이 완료되었을 때
    • unload - 웹 페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)
    • error - 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않을때
    • resize - 브라우저 창의 크기를 조정했을 때
    • scroll - 사용자가 페이지를 스크롤할 때

  • 키보드 이벤트

    • keydown - 사용자가 키를 처음 눌렀을 때
    • keyup - 사용자가 키를 땔 때
    • keypress - 사용자가 눌렀던 키의 문자가 입력되었을 때

  • 마우스 이벤트

    • click - 사용자가 페이지 위에서 마우스를 클릭했을 때
    • dblclick - 더블클릭
    • mousedown - 마우스 버튼 누르고 있을때
    • mouseup - 마우스 버튼을 뗄 때
    • mousemove - 마우스를 움직일 때
    • mouseenter - 요소 위로 마우스를 움직였을 때
    • mouseleave - 요소 밖으로 마우스를 움직였을 때
    • dragstart - 드래그 시작
    • drag - 드래그
    • dragend - 드래그 종료
    • mouseover - 마우스를 요소 위로 올렸을 때. CSS의 :hover 클래스를 이용할 것.
    • mouseout - 마우스가 요소 밖으로 벗어났을 때. CSS의 :hover 클래스를 이용할 것.

  • 터치 이벤트

    • touchstart - 화면을 건드렸을 때
    • touchend - 화면에서 손을 떼었을 때
    • touchmove - 화면에서 터치로 이동 중일 떄

  • 포커스 이벤트

    • focus / focusin - 요소가 포커스를 얻었을 때
    • blur / focusout - 요소가 포커스를 잃었을 때

  • 폼 이벤트

    • input - input, textarea 값이 변경되었을 때
    • change - 선택상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때
    • submit - 사용자가 폼을 제출할 때
    • reset - 리셋버튼을 클릭할 때
    • cut - 폼필드의 콘텐츠를 잘라낼 때
    • copy - 폼필드의 콘텐츠를 복사할 때
    • paste - 폼필드에 콘텐츠를 붙여넣을 때
    • select - 폼필드에서 텍스트를 선택할 때

  • Transiton 이벤트

    • transitionend - CSS transition이 완료되면 발생

  • Media 이벤트

    • abort - 미디어 로드 / 재생이 중단될 때.
    • canplay - 미디어를 재생할 수있는 충분한 데이터가 있을 때
    • canplaythrough - 버퍼링 없이 전체 미디어를 재생할 수 있을 때
    • durationchange - 미디어의 지속 시간이 변경되었을 때
    • emptied - 미디어가 비어있을 때. load() 메서드가 호출되어 다시 로드되기 전.
    • ended - 재생이 완료되면 발생.
    • error - 오류가 발생하면 전송됩니다.
    • loadeddata - 미디어의 현재 프레임이 로드될 때.
    • loadedmetadata - 미디어의 메타 데이터 로드가 완료되었을 때.
    • loadstart - 미디어 로드가 시작될 때.
    • pause - 재생이 일시 정지될 때.
    • play - 이전 일시 정지 이벤트 이후에 재생이 재개 될 때.
    • playing - 미디어가 재생되기 시작할 때.
    • progress - 미디어 다운로드 진행 상황을 알리기 위해 주기적으로 전송됩니다. 미디어 요소의 buffered 속성에서 사용할 수 있습니다.
    • ratechange - 재생 속도가 변경될 때.
    • seeked - 탐색이 완료될 때.
    • seeking - 탐색이 시작될 때.
    • stalled - 미디어 데이터를 가져오려고 하는데 데이터가 갑자기 나타나지 않을 때 발생.
    • suspend - 미디어의 로딩이 일시 중지되면 발생.
    • timeupdate - 요소의 currentTime 속성이 나타내는 시간이 변경될 때.
    • volumechange - 오디오 볼륨이 변경되면 전송.
    • waiting - 요청한 작업이 지연되어 다른 작업이 완료 되는것을 기다릴 때. (버퍼링 시)

  • HTML5 이벤트

    • DOMContentLoaded - DOM 트리가 생성될 때
    • hashchange - URL의 해시가 변경될 때 발생합니다. 해시는 페이지 내의 특정 영역에 연결하기 위해서 사용하며, AJAX를 이용하여 컨텐츠를 로드하는 경우에도 사용합니다.
    • beforeunload - 페이지가 언로드되기 전에 발생합니다. 사용자가 폼 데이터를 변경한 상태에서 저장하지 않고 이동하려는 경우에 이를 알려주는 용도 등으로 사용합니다.

이벤트 핸들러

자바스크립트를 이용해 DOM요소에 이벤트를 등록하는 방법 중 이벤트 핸들러와 이벤트 리스너에 대해 확인해 보겠습니다. 우선 이벤트 핸들러를 이용해 이벤트를 등록하는 방법입니다.

사용방법은 아래와 같이 문서 객체의 이벤트 속성에 함수를 등록하는 방식입니다.

// 사용법
문서객체.이벤트 속성명 = function() {}

예시 - window 객체에 onload 이벤트 등록

// onload 이벤트
window.onload = function() {
  var h1 = document.querySelector('h1');
  h1.innerHTML = 'hello';
}

이벤트 리스너

이벤트 핸들러 외에 이벤트 리스너를 이용해 이벤트를 등록할 수도 있습니다.

기본적인 사용법은 아래와 같이 문서 객체의 addEventListener 메서드를 사용하여 이벤트를 등록합니다.

// element - 이벤트에 반응할 요소 선택.
// "event" - 이벤트 바인딩. 어떤 이벤트가 발생했을 때 반응할 것인지 지정.
// fn - 이벤트 발생 시 실행될 코드.
// Boolean - 이벤트 버블링 / 캡처링 지정 (false: 버블링, true: 캡처링)
element.addEventListener("event", fn, Boolean);

다음은 특정 영역에 마우스를 올렸을 때 다른 요소에 메세지를 보여주는 예시입니다.

const handleMouseEnter = () => {
  const elMsg = document.getElementById("msg");
  elMsg.textContent = "마우스 엔터";
}

var card = document.getElementById("card");
card.adddEventListener("mouseenter", handleMouseEnter, false);

매개변수가 있을 경우

이벤트 핸들러에 지정된 함수에 괄호가 있을 경우 해당 함수는 즉시 실행됩니다. 즉, 함수가 이벤트를 기다리지 않고 바로 실행해버리게 됩니다.

따라서 만약 이벤트 함수에 인수를 전달해야 한다면 해당 함수를 익명함수로 감싸고, 익명함수의 내부에서 함수를 실행합니다.

/* 매개변수를 가진 이벤트 리스너 */
el.addEventListener("click", function(e) {
  handleClick(e);
}, false);

event 객체

event 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 객체입니다. 이 event 객체는 이벤트 리스너에 지정된 함수를 통해 전달됩니다.

const handleMouseEnter = (e) => {
  const elMsg = document.getElementById("msg");
  elMsg.textContent = e.type; //-> "mouseenter"
}

var card = document.getElementById("card");
card.adddEventListener("mouseenter", function(e) {
  handleMouseEnter(e);
}, false);

event 객체 프로퍼티

이벤트 객체에는 이벤트에 대한 정보를 담고 있는 다양한 객체들이 있습니다. 그 중 중요한 몇가지를 확인해 보겠습니다.

e.target; 					// 이벤트가 발생한 요소를 가져온다
e.type; 						// 발생한 이벤트의 종류 (click, mouseenter)
e.cancelable 				// 요소의 기본 동작을 취소할 수 있는지 여부 (true/false)
e.bubbles 					// 버블링 발생 여부 (true/false)
e.preventDefault() 	// 이벤트의 기본 동작을 취소한다.
e.stopPropagation() // 이벤트의 캡처링이나 버블링을 중단한다.
e.screenX 					// 모니터 상에서 커서의 X 위치
e.pageX 						// 문서 페이지를 기준으로 한 커서의 X 위치
e.pageY 						// 문서 페이지를 기준으로 한 커서의 Y 위치
e.clientY 					// 웹브라우저 내부 화면에서 커서의 Y 위치
e.keyCode 					// 각 키의 ASCII 코드
e.eventPhase				// 1= capture, 2= target, 3= bubbling
e.currentTarget			// 캡처링/버블링 시 리스너 대상
SHARE