웹기초 이벤트 처리 기초

사용자의 동작을 브라우저가 감지하고 대응하는 이벤트 처리(Event Handling)는 웹 인터랙션의 핵심이다.

자바스크립트를 활용한 이벤트 처리 기초를 정리했다.

이벤트 리스너 활용

특정 요소의 이벤트를 감지하여 동작을 수행하게 하는 표준 방법은 addEventListener이다.

const button = document.querySelector('#my-button');

// 1. 클릭 이벤트 감지
button.addEventListener('click', (event) => {
    console.log('버튼이 클릭되었습니다.');
    // event 객체는 클릭 위치 및 대상 요소 정보를 포함한다.
    console.log('클릭된 요소:', event.target);
});

// 2. 이벤트 위임 활용
const list = document.querySelector('#item-list');
list.addEventListener('click', (e) => {
    // 리스트 항목(LI) 클릭 여부 확인 후 스타일 변경
    if (e.target.tagName === 'LI') {
        e.target.style.color = 'blue';
    }
});

addEventListener의 장점

HTML 태그에 onclick 속성을 직접 정의하는 방식은 디자인과 로직의 혼재를 야기하여 유지보수를 어렵게 한다.

addEventListener를 사용하면 하나의 요소에 여러 동작을 독립적으로 등록할 수 있으며 로직을 체계적으로 관리할 수 있다.

인터랙티브 웹 구현

정적인 HTML 문서가 코드에 반응하여 동작하는 과정은 중요하다.

특히 이벤트 버블링(Bubbling) 원리를 이용한 ‘이벤트 위임’ 기법은 다수의 요소를 효율적으로 관리하게 한다.

사용자 반응에 즉각 대응하는 웹 서비스를 구축하기 위해 이벤트 메커니즘을 명확히 이해해야 하는 것 같다.

웨이호프