HTML.이벤트 기초 및 활용

자바스크립트 이벤트 핸들링: 웹 페이지와 사용자 상호작용하기 ✨

안녕하세요, 웹을 사랑하는 여러분! 오늘은 웹 페이지에 생명을 불어넣는 자바스크립트 이벤트와 이벤트 핸들링에 대해 알아보겠습니다. 사용자 클릭, 키 입력, 페이지 로딩 등 다양한 상황에 반응하는 웹을 만들고 싶다면 꼭 익혀야 할 개념입니다 💡

📌 이벤트(Event)란?

이벤트는 사용자와 웹 페이지 간의 상호작용을 알려주는 신호입니다. 예: 클릭, 키 입력, 이미지 로딩 등.
자바스크립트는 이런 이벤트가 발생했을 때 리스너(또는 핸들러)를 통해 반응합니다.

🔔 대표 예시:

<button onclick="alert('클릭!')">버튼 클릭</button>

👂 이벤트 리스너 작성 방법 3가지

1. HTML 속성으로 직접 – 간단하지만 비권장

<button onclick="alert('클릭!')">클릭하세요</button>

1. on 프로퍼티 활용 (자바스크립트 내부)

<button id="btn">클릭</button>
<script>
  document.getElementById("btn").onclick = function() {
    alert("클릭되었습니다!");
  };
</script>

1. addEventListener() – 💎 가장 권장되는 방식

<button id="btn">클릭</button>
<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", function() {
    alert("이벤트 리스너 실행!");
  });
</script>

🌊 이벤트 흐름 (버블링 vs 캡처링)

이벤트는 캡처링 → 타겟 → 버블링 순으로 흐릅니다. 기본값은 버블링이며, 전파를 막으려면 아래와 같이 합니다:

element.addEventListener("click", function(e) {
  e.stopPropagation(); // 상위 요소로 전파 차단
});

🎯 실전! 자주 사용하는 주요 이벤트

• onload – 문서 또는 이미지가 로드되었을 때
• onsubmit – 폼 제출 시
• onclick, onmouseover – 마우스 이벤트
• onkeydown, onkeyup – 키보드 입력

✅ 팁: 키보드 이벤트 예시

document.addEventListener("keydown", function(e) {
  if (e.key === "Enter") {
    alert("엔터 키를 눌렀어요!");
  }
});

🧠 마무리

이벤트 핸들링은 인터랙티브한 웹 개발의 기본입니다. 다양한 이벤트와 리스너 활용법을 익히면 사용자가 반응하고 싶어지는 매력적인 UI를 만들 수 있어요!