자바스크립트 DOM 이벤트 처리, 이벤트 리스너와 콜백 함수

자바스크립트 DOM 이벤트 처리, 이벤트 리스너와 콜백 함수

웹 페이지를 동적으로 만들기 위해서는 사용자와의 상호작용을 처리하는 것이 중요합니다. 자바스크립트의 DOM 이벤트 처리는 이러한 상호작용을 가능하게 해줍니다. 이 글에서는 이벤트 리스너와 콜백 함수의 기본 개념부터 실전 예제까지 살펴보겠습니다. 초보자도 쉽게 이해할 수 있도록 단계별로 설명합니다.

 

 

목차

1. DOM 이벤트 처리란?
2. 이벤트 리스너 추가하기
3. 콜백 함수 이해하기
4. 이벤트 객체 사용하기
5. 이벤트 전파와 버블링
6. 이벤트 위임
7. 실전 예제: 폼 검증

 

1. DOM 이벤트 처리란?

DOM 이벤트 처리는 사용자가 웹 페이지에서 발생시키는 다양한 이벤트(예: 클릭, 키보드 입력, 마우스 이동 등)를 처리하는 방법을 의미합니다. 자바스크립트를 사용하면 이러한 이벤트를 감지하고 적절한 동작을 수행할 수 있습니다.

 

 

2. 이벤트 리스너 추가하기

이벤트 리스너는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다. 이벤트 리스너를 추가하려면 addEventListener 메서드를 사용합니다.

document.getElementById('myButton').addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

위 예제는 버튼이 클릭되었을 때 알림 창을 띄우는 이벤트 리스너를 추가합니다.

 

 

3. 콜백 함수 이해하기

콜백 함수는 다른 함수에 의해 호출되는 함수를 말합니다. 이벤트 리스너에 전달된 함수는 이벤트가 발생했을 때 호출되므로 콜백 함수의 한 예입니다.

function handleClick() {
    console.log('버튼이 클릭되었습니다.');
}
document.getElementById('myButton').addEventListener('click', handleClick);

위 예제에서 handleClick 함수는 버튼 클릭 시 실행되는 콜백 함수입니다.

 

 

4. 이벤트 객체 사용하기

이벤트가 발생하면 브라우저는 이벤트에 대한 정보를 담은 이벤트 객체를 생성합니다. 이벤트 객체는 이벤트와 관련된 다양한 정보를 제공합니다.

document.getElementById('myButton').addEventListener('click', function(event) {
    console.log('클릭 위치: ', event.clientX, event.clientY);
});

위 예제는 클릭 이벤트가 발생한 위치의 좌표를 콘솔에 출력합니다.

 

 

 

 

5. 이벤트 전파와 버블링

이벤트 전파는 이벤트가 발생했을 때 DOM 트리를 따라 이벤트가 전파되는 과정을 말합니다. 이벤트 버블링은 이벤트가 하위 요소에서 발생한 후 상위 요소로 전파되는 현상입니다.

document.getElementById('parent').addEventListener('click', function() {
    console.log('부모 요소 클릭');
});
document.getElementById('child').addEventListener('click', function(event) {
    console.log('자식 요소 클릭');
    event.stopPropagation(); // 이벤트 전파 중단
});

위 예제는 자식 요소 클릭 시 부모 요소로의 이벤트 전파를 중단합니다.

 

 

6. 이벤트 위임

이벤트 위임은 공통 조상 요소에 이벤트 리스너를 설정하여 여러 하위 요소의 이벤트를 처리하는 기법입니다. 이를 통해 코드의 중복을 줄이고 성능을 향상시킬 수 있습니다.

document.getElementById('list').addEventListener('click', function(event) {
    if (event.target && event.target.nodeName == 'LI') {
        console.log('리스트 아이템 클릭: ', event.target.textContent);
    }
});

위 예제는 리스트 항목 클릭 시 이벤트를 처리하는 이벤트 위임의 예입니다.

 

 

7. 실전 예제: 폼 검증

다음은 폼 제출 시 입력 값을 검증하는 실전 예제입니다. 사용자가 이름을 입력하지 않으면 경고 메시지를 표시합니다.

document.getElementById('myForm').addEventListener('submit', function(event) {
    var nameInput = document.getElementById('name');
    if (nameInput.value.trim() === '') {
        alert('이름을 입력해주세요.');
        event.preventDefault(); // 폼 제출 중단
    }
});

위 예제는 폼 제출 시 이름 필드가 비어 있으면 경고 메시지를 띄우고 제출을 중단합니다.