minstudio

이벤트 리스너 기초 (Event Handling)

🎯 기본 이벤트 처리

사용자의 클릭(click), 키보드 입력(keydown), 마우스 이동(mousemove) 등의 행동을 감지하고 반응하기 위해 addEventListener 메서드를 사용합니다. 이는 현대 자바스크립트에서 이벤트를 다루는 가장 표준적인 방법입니다.

  • 이벤트 객체 (Event Object): 이벤트 콜백 함수의 첫 번째 매개변수(보통 e 또는 event)로 전달되며, 발생한 이벤트의 상세 정보를 담고 있습니다.
  • e.target: 이벤트가 실제로 발생한 DOM 요소를 가리킵니다. 실무에서 클릭된 버튼이나 입력된 텍스트 필드의 값을 가져올 때 필수적으로 사용됩니다.
  • e.preventDefault(): 태그가 가진 기본 동작을 강제로 취소합니다. (예: <a> 태그의 페이지 이동 막기, <form> 태그의 새로고침 현상 막기 등)
<!-- 기본 이벤트 등록 및 기본 동작 막기 -->
<button id="myBtn">클릭해보세요!</button>
<a href="https://google.com" id="myLink">구글로 이동 (차단됨)</a>
<div id="output" style="margin-top: 20px;"></div>

<script>
  // 1. 버튼 클릭 이벤트 처리
  const btn = document.getElementById('myBtn');
  const output = document.getElementById('output');

  btn.addEventListener('click', function(event) {
    // event.target을 통해 어떤 요소가 클릭되었는지 확인 가능합니다.
    output.innerText = '✅ 일반 버튼이 클릭되었습니다! 대상: ' + event.target.tagName;
  });

  // 2. 링크 이동 막기
  const link = document.getElementById('myLink');
  
  link.addEventListener('click', function(event) {
    event.preventDefault(); // 기본 이동 동작 강제 취소
    output.innerText = '🛑 링크 이동이 차단되었습니다!';
  });
</script>
실행 결과
이벤트 리스너 기초 (Event Handling) | Minstudio