JavaScript 이벤트 처리 기본

🎯 자바스크립트 이벤트 처리 기본

이벤트(Event)란 사용자의 행동(클릭, 키보드 입력, 마우스 움직임 등)에 반응하여 실행되는 동작입니다. 자바스크립트에서 이벤트 처리는 웹 페이지와 사용자 사이의 상호작용을 가능하게 합니다.

🔹 이벤트 리스너(Event Listener) 등록

이벤트를 처리하는 가장 일반적인 방법은 addEventListener() 메서드를 사용하는 것입니다.

document.getElementById("myButton").addEventListener("click", function() {
  alert("버튼이 클릭되었습니다!");
});

📌 HTML 예제

<button id="myButton">클릭하세요</button>

🔸 인라인 이벤트 처리

HTML 태그 안에 직접 이벤트를 작성하는 방법도 있습니다.

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

⚠️ 주의: 인라인 방식은 유지보수에 불리하므로 addEventListener를 권장합니다.

✅ 자주 사용되는 이벤트 종류

• click – 클릭할 때
• mouseover – 마우스를 올렸을 때
• mouseout – 마우스를 뗐을 때
• keydown – 키보드를 눌렀을 때
• submit – 폼 전송 시
• change – 입력값이 변경되었을 때

🧪 예제: 배경색 변경

버튼을 클릭하면 페이지 배경색이 변경됩니다.

<button id="colorBtn">배경색 바꾸기</button>

<script>
document.getElementById("colorBtn").addEventListener("click", function() {
  document.body.style.backgroundColor = "#f1c40f";
});
</script>

📌 마무리 요약

• 이벤트는 사용자와 상호작용을 구현하는 핵심 요소
• addEventListener()로 다양한 이벤트 처리 가능
• 인라인 이벤트는 피하고 JS 코드로 분리하는 것이 좋음
• 이벤트 종류는 다양하며 조합해서 응용 가능