자바스크립트 DOM 이벤트 처리, 이벤트 리스너와 콜백 함수
웹 페이지를 동적으로 만들기 위해서는 사용자와의 상호작용을 처리하는 것이 중요합니다. 자바스크립트의 DOM 이벤트 처리는 이러한 상호작용을 가능하게 해줍니다. 이 글에서는 이벤트 리스너와 콜백 함수의 기본 개념부터 실전 예제까지 살펴보겠습니다. 초보자도 쉽게 이해할 수 있도록 단계별로 설명합니다.
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(); // 폼 제출 중단
}
});
위 예제는 폼 제출 시 이름 필드가 비어 있으면 경고 메시지를 띄우고 제출을 중단합니다.
'프로그래밍 언어 > 자바스크립트' 카테고리의 다른 글
JavaScript 비동기 프로그래밍 기초 개념과 실습 예제 (0) | 2024.08.11 |
---|---|
자바스크립트 DOM 폼 처리, 입력 값 가져오기와 유효성 검사 (0) | 2024.08.10 |
자바스크립트 DOM 요소 선택, 조작, 이벤트 처리 (0) | 2024.08.08 |
자바스크립트 DOM, 웹 페이지 동적 조작 (0) | 2024.08.07 |
자바스크립트(JavaScript) 비동기 처리 실전 예제 (0) | 2024.08.06 |