자바스크립트 이벤트 처리: 이벤트 종류, 이벤트 리스너, 이벤트 객체

자바스크립트는 웹 페이지에서 다양한 사용자 상호작용을 처리하기 위해 이벤트를 사용합니다. 이벤트는 웹 페이지에서 발생하는 특정 사건입니다. 예를 들어 버튼 클릭, 마우스 이동, 키보드 입력 등과 같은 동작이 이벤트입니다. 이번 글에서는 자바스크립트 주요 이벤트 종류, 이벤트 리스너와 이벤트 객체에 대해서 알아보겠습니다.

1. 주요 이벤트 종류

주요 이벤트 외에도 다양한 이벤트들이 있지만 주요 이벤트들은 자주 사용되므로 먼저 알고 있으면 좋습니다. 각 이벤트는 상황에 따라 적절한 이벤트 리스너와 함께 사용됩니다.

1. 마우스 이벤트

이벤트 종류	이벤트 설명
click	요소를 클릭할 때 발생합니다.
dblclick	요소를 빠르게 두 번 클릭할 때 발생합니다.
mousedown	마우스 버튼을 누르고 있는 동안 발생합니다.
mouseup	마우스 버튼을 놓을 때 발생합니다.
mousemove	마우스를 움직일 때 발생합니다.
mouseover	마우스가 요소 위로 올라갈 때 발생합니다.
mouseout	마우스가 요소에서 벗어날 때 발생합니다.

2. 키보드 이벤트

이벤트 종류	이벤트 설명
keydown	키를 누를 때 발생합니다.
keypress	키를 누르고 있는 동안 발생합니다.
keyup	키를 놓을 때 발생합니다.

3. 폼 이벤트

이벤트 종류	이벤트 설명
submit	폼이 제출될 때 발생합니다.
reset	폼이 초기화될 때 발생합니다.
change	폼의 입력값이 변경될 때 발생합니다.
input	입력 요소에 입력이 발생할 때 발생합니다.
focus	요소에 포커스가 갈 때 발생합니다.
blur	요소에서 포커스가 빠질 때 발생합니다.

4. 창 이벤트

이벤트 종류	이벤트 설명
load	페이지나 이미지 등 리소스가 로드되었을 때 발생합니다.
unload	페이지나 이미지 등 리소스가 언로드되었을 때 발생합니다.
resize	창 크기가 변경될 때 발생합니다.
scroll	스크롤이 발생할 때 발생합니다.

2. 이벤트 리스너

이벤트 리스너는 특정 이벤트가 발생할 때 호출되는 함수입니다. 이벤트 리스너를 사용하면 웹 페이지에서 발생하는 이벤트에 대해 원하는 코드를 실행할 수 있습니다. 이벤트 리스너는 다음과 같이 두 가지 방법으로 추가할 수 있습니다.

1. HTML 태그에 직접 이벤트 속성 추가하기

HTML 태그에 이벤트 속성을 추가하여 이벤트 리스너를 등록할 수 있습니다. 예를 들어, 클릭 이벤트를 처리하려면 onclick 속성을 사용합니다.

<button onclick="alert('버튼 클릭됨!')">클릭하세요</button>

2. 자바스크립트에서 addEventListener 메서드 사용하기

자바스크립트에서 addEventListener 메서드를 사용하여 이벤트 리스너를 등록할 수 있습니다.

<button>클릭하세요</button>

<script>

// 예제1: 화살표 함수 (현재 자바스크립트 개발에서 더 선호되는 방식)
const button = document.querySelector("button");
button.addEventListener("click", () => {
     alert("버튼 클릭됨!");
});

// 예제2: 함수 표현식
/*
const button = document.querySelector("button");
button.onclick = function() {
     alert("버튼 클릭됨!");
}
*/

// 예제3: 전통적인 함수 선언 방식
/*
const button = document.querySelector("button");
button.onclick = clickEvent;
function clickEvent() {
     alert("버튼 클릭됨!");
}
*/

</script>

3. 이벤트 객체

이벤트 리스너가 호출될 때 이벤트에 관한 정보를 담고 있는 이벤트 객체가 자동으로 생성됩니다. 이벤트 객체는 이벤트에 대한 상세한 정보를 제공하며 이벤트 처리에 유용한 메서드를 포함합니다.

<button>클릭하세요</button>

<script>

const button = document.querySelector("button");
button.addEventListener("click", (event) => {
     console.log(event); // 이벤트 객체 출력
});

</script>

1. 주요 이벤트 객체의 속성

속성	설명
type	이벤트의 종류를 나타냅니다 (예: “click”, “mousedown”, “keyup” 등).
target	이벤트를 발생시킨 HTML 요소입니다.
currentTarget	이벤트 리스너가 등록된 HTML 요소입니다.
bubbles	이벤트가 버블링 단계를 거치는지 여부를 나타내는 불리언 값입니다.
cancelable	이벤트가 취소 가능한지 여부를 나타내는 불리언 값입니다.
defaultPrevented	preventDefault() 메서드가 호출되어 기본 동작이 취소된 경우 true 값을 가집니다.
timestamp	이벤트가 발생한 시각을 나타내는 타임스탬프입니다.

☞ 이벤트 객체를 활용하면 다양한 이벤트 처리 작업을 수행할 수 있습니다.

2. 예제: event.key 속성 사용

키보드 이벤트를 처리하려면 event.key 속성을 사용하여 어떤 키가 눌렸는지 확인할 수 있습니다.

document.addEventListener("keydown", (event) => {
  console.log(`눌린 키: ${event.key}`);
});

3. 예제: event.preventDefault() 메서드 사용

이벤트의 기본 동작을 취소합니다. 예를 들어 클릭 이벤트에 대한 링크 이동을 막을 수 있습니다.

const link = document.querySelector("a");
link.addEventListener("click", (event) => {
  event.preventDefault(); // 링크 클릭 시 이동을 취소함
  alert("링크 클릭됨!");
});