이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 JavaScript 함수입니다.
이벤트 핸들러는 해당 이벤트를 감지하고 처리합니다.
예를 들어, 클릭 이벤트를 처리하기 위해 다음과 같이 등록할 수 있습니다:
const btnNode = document.getElementById("btn");
btnNode.onclick = () => {
console.log("클릭 1");
};
btnNode.onclick = () => {
console.log("클릭 2");
};
btnNode.onclick = () => {
console.log("클릭 3");
};주의할 점은 이벤트 핸들러는 하나의 이벤트 유형에 대해 하나의 핸들러만 가질 수 있습니다.
위의 예시에서는 btnNode.onclick이 세 번 할당되어 마지막 것만 실행됩니다.
이벤트 리스너 (Event Listeners)
이벤트 리스너는 특정 이벤트가 발생할 때 이벤트 핸들러를 호출하기 위한 메커니즘입니다.
addEventListener 메서드를 사용하여 이벤트 리스너를 등록합니다.
let myButton = document.getElementById("myButton");
myButton.addEventListener("click", function () {
console.log("버튼이 클릭되었습니다.");
});이벤트 객체 (Event Object)
이벤트 핸들러가 실행될 때, 이벤트와 관련된 정보를 포함하는 이벤트 객체가 생성됩니다.
이벤트 객체를 사용하여 이벤트에 대한 정보를 확인하고 조작할 수 있습니다.
예를 들어, 마우스 클릭 위치를 알고자 할 때 이벤트 객체를 사용할 수 있습니다.
myButton.addEventListener("click", function (event) {
console.log("클릭 위치: " + event.clientX + ", " + event.clientY);
});이벤트 전파 (Event Propagation)
이벤트는 문서 객체 모델(DOM)의 트리 구조를 따라 상위에서 하위로 전파됩니다.
이를 이벤트 전파라고 합니다.
이벤트 전파에는 버블링(bubbling)과 캡처링(capturing) 단계가 포함됩니다.
이벤트 핸들러를 등록할 때 캡처링 단계 또는 버블링 단계에서 처리하도록 선택할 수 있습니다.
event.stopPropagation()은 이벤트 전파를 중단시킵니다.
기본 동작 방지 (Preventing Default Behavior)
일부 이벤트는 브라우저의 기본 동작을 수행하려고 시도합니다 (예: 링크 클릭 시 페이지 이동).
이러한 동작을 변경하거나 취소하려면 event.preventDefault()를 호출합니다.
let link = document.getElementById("myLink");
link.addEventListener("click", function (event) {
event.preventDefault(); // 링크 클릭 시 기본 동작을 취소
console.log("링크 클릭 이벤트를 처리했습니다.");
});자바스크립트의 이벤트 핸들링은 웹 애플리케이션을 상호작용적으로 만드는 중요한 구성 요소입니다.
이벤트를 처리하고 이벤트 핸들러를 등록하여 사용자와 상호작용하거나 웹 페이지 동작을 제어할 수 있습니다.
