DOM 이벤트 처리
HTML 문서의 요소에는 특정 상황에서 발생하는 이벤트를 처리할 수 있는 기능이 있다. 예를 들어, 클릭하거나 마우스를 올리거나 키를 누르는 등의 동작이 일어났을 때 이를 감지하고 반응할 수 있다. JavaScript를 사용하여 DOM의 이벤트를 처리하는 방법을 살펴보자.
이벤트 핸들러 등록
DOM 요소에 이벤트를 처리할 수 있는 이벤트 핸들러를 등록하는 방법은 다양하다. 가장 일반적인 방법은 addEventListener를 사용하는 것이다. 예를 들어, 아래 코드는 버튼이 클릭되었을 때 handleClick 함수를 실행하는 방법을 보여준다.
const button = document.querySelector('button');
button.addEventListener('click', handleClick);
이벤트 객체 활용
이벤트가 발생했을 때, 발생한 이벤트의 정보를 담고 있는 이벤트 객체를 활용할 수 있다. 이벤트 객체를 통해 발생한 이벤트의 세부 정보를 확인할 수 있다. 아래는 클릭 이벤트가 발생한 요소의 위치 정보를 출력하는 예제이다.
function handleClick(event) {
console.log('클릭 위치:', event.clientX, event.clientY);
}
이벤트 전파와 버블링
DOM 요소에서 발생한 이벤트는 해당 요소에서 시작하여 조상 요소를 따라 올라가며 전파된다. 이 때 발생하는 동작을 이벤트 전파 또는 버블링이라고 한다. 이벤트 전파를 활용하여 특정 요소에서 발생한 이벤트가 상위 요소까지 전파되어 처리될 수 있다.
이벤트 위임
이벤트 핸들러를 필요한 만큼 많이 등록하면 관리가 복잡해지고 성능에도 영향을 미칠 수 있다. 따라서, 이벤트 위임을 통해 하나의 상위 요소에 이벤트를 등록하여 하위 요소들의 이벤트를 처리하는 방법이 있다. 이를 통해 효율적으로 DOM 이벤트를 관리할 수 있다.
이렇게 JavaScript를 활용하여 DOM의 이벤트를 처리할 수 있다. 이를 통해 동적인 웹 페이지를 구현할 수 있으며, 사용자와의 상호작용을 효과적으로 다룰 수 있다.