Javascript 이벤트 처리 완벽 가이드
자바스크립트에서 이벤트는 사용자와 웹 페이지 간의 상호작용을 처리하는 중요한 방법입니다. 예를 들어, 버튼을 클릭하거나 입력 필드에 텍스트를 입력하는 등의 작업은 이벤트로 처리됩니다. 이 글에서는 자바스크립트에서 이벤트를 처리하는 방법에 대해 자세히 알아보겠습니다.
1. 이벤트란?
이벤트는 웹 페이지에서 발생하는 상호작용을 나타냅니다. 대표적인 이벤트에는 클릭, 마우스 오버, 키 입력 등이 있습니다. 자바스크립트는 이러한 이벤트가 발생할 때 이를 처리하는 방법을 제공합니다.
2. 이벤트 리스너 사용법
자바스크립트에서 이벤트를 처리하는 가장 기본적인 방법은 addEventListener() 메서드를 사용하는 것입니다. 이 메서드를 사용하여 특정 이벤트가 발생했을 때 실행할 콜백 함수를 지정할 수 있습니다.
<button id="myButton">클릭하세요</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>
3. 이벤트 객체
이벤트가 발생할 때, 자바스크립트는 이벤트 객체를 생성하여 이벤트에 대한 추가 정보를 제공합니다. 이 객체는 이벤트가 발생한 요소, 이벤트 타입, 마우스 좌표 등 여러 가지 정보를 포함하고 있습니다.
<button id="myButton">클릭하세요</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
console.log("클릭한 요소:", event.target); // 클릭한 버튼 요소
console.log("이벤트 타입:", event.type); // 클릭 이벤트
});
</script>
4. 이벤트 전파: 버블링과 캡처링
이벤트는 발생한 요소에서부터 부모 요소로 전파되거나, 그 반대로 전파될 수 있습니다. 이를 이벤트 버블링(bubbling)과 이벤트 캡처링(capturing)이라고 합니다.
- 버블링: 이벤트는 가장 작은 요소에서 시작해 상위 요소로 전파됩니다.
- 캡처링: 이벤트는 가장 상위 요소에서 시작해 하위 요소로 전파됩니다.
기본적으로 자바스크립트는 이벤트 버블링 방식을 사용합니다. 하지만 addEventListener 메서드의 세 번째 인자에 true를 설정하면 캡처링 방식으로 전파됩니다.
<div id="parent">
<button id="child">버튼 클릭</button>
</div>
<script>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// 이벤트 버블링
parent.addEventListener("click", function() {
alert("부모 요소가 클릭되었습니다!");
});
// 이벤트 캡처링
parent.addEventListener("click", function() {
alert("부모 요소가 캡처링되었습니다!");
}, true);
child.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>
5. 이벤트 위임
이벤트 위임(Event Delegation)은 상위 요소에 이벤트를 한 번만 등록하고, 하위 요소에서 발생하는 이벤트를 처리하는 기법입니다. 이렇게 하면 여러 개의 하위 요소에 개별적으로 이벤트를 등록할 필요 없이 하나의 상위 요소에서 모든 이벤트를 처리할 수 있습니다.
<ul id="list">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<script>
const list = document.getElementById("list");
list.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
alert(`리스트 항목 ${event.target.textContent} 클릭!`);
}
});
</script>
6. 이벤트 핸들러와 화살표 함수
이벤트 핸들러를 정의할 때, 화살표 함수(Arrow Function)를 사용하면 this의 동작이 달라질 수 있습니다. 일반 함수에서는 this가 이벤트를 발생시킨 요소를 가리키지만, 화살표 함수에서는 this가 외부의 this를 그대로 유지합니다.
<button id="myButton">클릭하세요</button>
<script>
const button = document.getElementById("myButton");
// 일반 함수
button.addEventListener("click", function() {
console.log(this); // 이벤트를 발생시킨 버튼 요소
});
// 화살표 함수
button.addEventListener("click", () => {
console.log(this); // window 객체(전역 객체) 또는 부모 스코프의 this
});
</script>
7. 에러 처리 및 최적화
이벤트 처리 중에 발생할 수 있는 예외를 처리하는 것은 매우 중요합니다. 이벤트 핸들러 내부에서 오류가 발생하면 전체 페이지가 멈추거나 예기치 않게 동작할 수 있기 때문입니다.
<button id="myButton">클릭하세요</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
try {
// 오류 발생 가능 코드
throw new Error("알 수 없는 오류 발생!");
} catch (error) {
console.error("에러 발생:", error);
}
});
</script>
또한, 이벤트 리스너는 불필요하게 많은 이벤트를 등록하지 않도록 주의해야 합니다. 이벤트 위임, 이벤트의 최적화 등을 고려하여 성능을 개선할 수 있습니다.
