이벤트 처리

사용자와 소통하는 웹의 핵심 기술

​웹사이트를 단순히 “보여주는 공간”이라고 생각하면 오해입니다. 진짜 웹은 사용자가 클릭하거나 입력하는 순간부터 시작됩니다. 이러한 사용자 행동을 감지하고 반응하도록 만드는 기술이 바로 이벤트 처리(Event Handling) 입니다. JavaScript에서 이벤트 처리를 익히면, 버튼을 클릭할 때 알림을 띄우거나 입력값을 실시간으로 확인하는 등 동적인 상호작용을 구현할 수 있습니다.

이벤트의 기본 개념

이벤트란 사용자의 동작(클릭, 스크롤, 입력 등)이나 시스템에서 발생하는 사건을 의미합니다. HTML 요소에 특정 이벤트가 발생했을 때 실행할 동작을 미리 정의하는 것이 이벤트 처리입니다.

예를 들어, 버튼을 클릭하면 경고창을 띄우는 간단한 코드를 보겠습니다.

<button id="btn">눌러보세요</button>
<script>
  const button = document.getElementById("btn");
  button.addEventListener("click", () => {
    alert("버튼이 클릭되었습니다!");
  });
</script>

이렇게 addEventListener를 사용하면 특정 요소에 원하는 이벤트를 연결할 수 있습니다.

주요 이벤트 종류

• 마우스 이벤트: click, dblclick, mouseover, mouseout

• 키보드 이벤트: keydown, keyup, keypress

• 폼 이벤트: input, change, submit

• 윈도우 이벤트: load, resize, scroll

예를 들어, 사용자가 입력창에 글자를 입력할 때마다 실시간으로 미리보기 텍스트를 업데이트하려면 다음과 같이 작성합니다.

<input id="nameInput" placeholder="이름을 입력하세요">
<p id="preview"></p>
<script>
  const input = document.getElementById("nameInput");
  const preview = document.getElementById("preview");


  input.addEventListener("input", () => {
    preview.innerText = `안녕하세요, ${input.value}!`;
  });
</script>

이벤트 위임(Event Delegation)

실무에서 자주 등장하는 패턴이 바로 이벤트 위임입니다. 많은 요소 각각에 이벤트를 붙이는 대신, 부모 요소 하나에만 이벤트를 걸어 효율적으로 관리하는 방식입니다.

<ul id="menu">
  <li>메뉴 1</li>
  <li>메뉴 2</li>
  <li>메뉴 3</li>
</ul>
<script>
  const menu = document.getElementById("menu");
  menu.addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
      alert(`${e.target.innerText} 선택됨`);
    }
  });
</script>

이렇게 하면 li가 몇 개가 되든, 하나의 이벤트 핸들러로 모두 처리할 수 있습니다.

이벤트 처리는 웹 개발에서 사용자 경험(UX) 을 결정짓는 핵심입니다. 단순히 코드를 실행하는 것을 넘어, 사용자와 소통하고 인터랙션을 제공하는 기술입니다. 기본 이벤트부터 이벤트 위임까지 익혀두면 실무에서 훨씬 깔끔하고 효율적인 코드를 작성할 수 있습니다.