10장: 이벤트와 이벤트 처리

자바스크립트와 이벤트, 그 첫 만남

오늘날 웹페이지가 단순히 정보를 보여주는 수준에 머무르지 않고, 사용자와 실시간으로 소통할 수 있는 이유. 그 중심에는 바로 "이벤트(Event)"라는 개념이 있습니다. 사용자가 버튼을 클릭하거나, 키보드로 무언가를 입력하면, 자바스크립트는 이를 알아차리고 즉시 원하는 기능을 실행할 수 있습니다. 이러한 반응형 웹의 시작점이 바로 이벤트와 이벤트 처리 방법입니다.

이벤트란 무엇인가?

이벤트는 웹사이트에서 발생하는 다양한 상황들을 뜻합니다. 예를 들어, 마우스를 누르는 동작이나 키보드 입력, 화면이 로드되는 순간, 심지어 창 크기를 조절하는 행위 역시 모두 이벤트입니다. 자바스크립트는 이런 사용자 행동을 인식하고, 우리가 지정한 동작으로 연결시켜 사용자와 적극적으로 소통할 수 있게 해줍니다.

이벤트 핸들러와 이벤트 리스너

웹 요소에서 이벤트가 발생하면, 그에 반응하는 함수가 필요합니다. 이 함수를 "이벤트 핸들러"라 부릅니다. 예를 들어, 버튼을 클릭했을 때 알림창이 나오길 원한다면, 아래와 같이 함수를 지정할 수 있습니다.

<button onclick="alert('클릭했습니다!')">누르기</button>

가장 간단한 방식은 HTML 태그에 바로 함수를 연결하는 것이지만, 유지보수와 확장성 면에서는 자바스크립트 코드로 별도로 이벤트를 지정하는 방법(addEventListener)이 훨씬 더 권장됩니다.

addEventListener, 보다 현대적인 이벤트 처리

자바스크립트에서는 addEventListener 메서드를 통해 이벤트 리스너를 등록합니다. 이 기법을 쓰면, HTML 구조와 자바스크립트 로직을 분리할 수 있어 관리가 쉬워집니다.

예시:

const btn = document.getElementById('myBtn');
btn.addEventListener('click', function(event) {
  alert('버튼이 눌렸어요!');
});

여기서 첫 번째 인자는 이벤트 명(click), 두 번째는 이벤트 발생 시 실행할 함수입니다. 함수의 인자로는 이벤트의 정보를 담은 객체(event)가 전달되어, 클릭 위치나 키 입력 등 추가 정보에 접근할 수도 있습니다.

다양한 이벤트, 그리고 활용 예시

자주 사용하는 이벤트 종류에는 click, mouseover, keydown, submit 등이 있습니다. 웹에서는 사용자의 다양한 행동에 맞춰 상상 가능한 대부분의 이벤트가 정의되어 있습니다. 이를 적극적으로 활용하면, 버튼 누를 때 색상이 바뀌거나, 입력창에서 실시간 안내 문구가 뜨는 등 다채로운 인터랙션을 만들 수 있습니다.

이벤트와 DOM의 관계

이벤트는 결국 DOM(문서 객체 모델) 요소에 연결되어 동작합니다. 버튼, 입력창, 문단 등 웹페이지를 구성하는 모든 요소에 이벤트를 부착할 수 있습니다. 이를 통해 사용자가 사이트와 소통할 수 있도록 만들어줍니다.

마치며

자바스크립트에서 이벤트를 다룰 수 있게 되는 순간, 정적인 웹페이지는 생명을 얻게 됩니다. 사용자의 행동에 맞춰 페이지를 자유롭게 반응시키는 법을 익히면, 웹 개발자로서 한 단계 성장한 자신을 느낄 수 있을 것입니다. 이제 여러분만의 작은 인터랙션을 직접 만들어 보세요.