▶ JavaScript Tutorial

JavaScript Events

JavaScript Events: 이벤트 처리의 이해와 활용

JavaScript에서 **이벤트(Event)**는 사용자의 행동이나 브라우저의 변화에 따라 발생하는 중요한 요소입니다. 이벤트를 적절히 활용하면 웹 애플리케이션의 상호작용성을 높일 수 있습니다. 이 가이드는 JavaScript 이벤트의 개념, 종류, 그리고 이벤트를 처리하는 방법에 대해 설명합니다.

1. 이벤트의 기본 개념

이벤트는 사용자가 클릭, 키 입력, 스크롤 등과 같은 동작을 수행하거나 페이지의 로드와 같은 상태 변화가 발생할 때 발생합니다. JavaScript에서는 이러한 이벤트를 감지하고 처리할 수 있습니다.

1.1. 이벤트 객체

이벤트가 발생하면 JavaScript는 이벤트 객체를 생성하여 이벤트에 대한 정보를 담습니다. 이 객체는 이벤트의 종류, 발생한 요소, 시간 정보 등을 포함하고 있습니다.

document.addEventListener("click", function(event) {
    console.log(event); // 이벤트 객체 출력
});

2. 이벤트의 종류

JavaScript에서는 다양한 종류의 이벤트를 지원합니다. 여기서는 몇 가지 일반적인 이벤트 유형을 소개합니다.

2.1. 사용자 인터페이스 이벤트

click: 요소가 클릭될 때 발생합니다.
dblclick: 요소가 더블 클릭될 때 발생합니다.
mouseover: 마우스 포인터가 요소 위로 이동할 때 발생합니다.
mouseout: 마우스 포인터가 요소를 벗어날 때 발생합니다.
keydown: 키보드의 키가 눌릴 때 발생합니다.
keyup: 키보드의 키가 눌렸다가 떼어질 때 발생합니다.
focus: 요소가 포커스를 받을 때 발생합니다.
blur: 요소가 포커스를 잃을 때 발생합니다.

2.2. 문서 이벤트

DOMContentLoaded: HTML 문서가 완전히 로드되고 파싱되었을 때 발생합니다.
load: 모든 리소스(이미지, 스타일시트 등)가 로드된 후 발생합니다.
unload: 페이지가 떠날 때 발생합니다.

3. 이벤트 리스너 추가 및 제거

이벤트를 처리하기 위해서는 이벤트 리스너를 추가해야 합니다. 리스너는 특정 이벤트가 발생할 때 실행되는 함수입니다.

3.1. 이벤트 리스너 추가

addEventListener() 메서드를 사용하여 이벤트 리스너를 추가할 수 있습니다.

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
    alert("Button clicked!");
});

3.2. 이벤트 리스너 제거

removeEventListener() 메서드를 사용하여 이벤트 리스너를 제거할 수 있습니다.

function handleClick() {
    alert("Button clicked!");
}

// 이벤트 리스너 추가
button.addEventListener("click", handleClick);

// 이벤트 리스너 제거
button.removeEventListener("click", handleClick);

4. 이벤트 전파

JavaScript 이벤트는 **버블링(bubbling)**과 캡처링(capturing) 두 가지 단계로 전파됩니다. 이러한 전파 방식을 이해하면 더욱 효과적으로 이벤트를 처리할 수 있습니다.

4.1. 버블링(Bubbling)

버블링은 이벤트가 가장 깊은 자식 요소에서 시작하여 부모 요소로 전파되는 방식입니다. 기본적으로 이벤트는 버블링 방식으로 전파됩니다.

<div id="parent">
    <button id="child">Click Me</button>
</div>

document.getElementById("parent").addEventListener("click", function() {
    alert("Parent clicked!");
});

document.getElementById("child").addEventListener("click", function(event) {
    alert("Child clicked!");
    // event.stopPropagation(); // 버블링 중지
});

4.2. 캡처링(Capturing)

캡처링은 이벤트가 부모 요소에서 시작하여 자식 요소로 전파되는 방식입니다. 캡처링 이벤트 리스너를 추가하려면 세 번째 인자를 true로 설정합니다.

document.getElementById("parent").addEventListener("click", function() {
    alert("Parent clicked (capturing)!");
}, true);

5. 이벤트 객체의 사용

이벤트 객체를 통해 이벤트의 세부 정보를 얻을 수 있습니다. 이를 통해 이벤트의 발생 위치, 키 상태, 마우스 클릭의 좌표 등을 확인할 수 있습니다.

5.1. 마우스 이벤트

const box = document.getElementById("box");

box.addEventListener("click", function(event) {
    console.log("Mouse coordinates:", event.clientX, event.clientY);
});

5.2. 키보드 이벤트

document.addEventListener("keydown", function(event) {
    console.log("Key pressed:", event.key);
});

6. 커스텀 이벤트

JavaScript에서는 자신만의 이벤트를 생성할 수도 있습니다. 커스텀 이벤트를 사용하면 특정 상황에서의 상호작용을 정의할 수 있습니다.

6.1. 커스텀 이벤트 생성

const myEvent = new Event("myCustomEvent");

// 이벤트 리스너 추가
document.addEventListener("myCustomEvent", function() {
    console.log("Custom event triggered!");
});

// 커스텀 이벤트 발생
document.dispatchEvent(myEvent);

요약

이벤트 기본 개념: 사용자의 행동이나 브라우저의 변화에 따라 발생하며, 이벤트 객체를 통해 정보에 접근할 수 있음.
이벤트 종류: 사용자 인터페이스 이벤트와 문서 이벤트 등 다양한 이벤트 유형이 존재.
이벤트 리스너: addEventListener()와 removeEventListener() 메서드를 통해 이벤트 리스너를 추가하거나 제거할 수 있음.
이벤트 전파: 버블링과 캡처링 두 가지 단계로 전파되며, 이를 이해하면 더욱 효과적인 이벤트 처리가 가능.
이벤트 객체 활용: 마우스 클릭 좌표나 키 상태 등의 세부 정보를 이벤트 객체를 통해 확인할 수 있음.
커스텀 이벤트: 자신만의 이벤트를 생성하여 특정 상황에서의 상호작용을 정의할 수 있음.

JavaScript의 이벤트를 이해하고 활용하면 웹 애플리케이션의 상호작용성을 높일 수 있습니다.

코딩 스쿨 JavaScript