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

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

이벤트 객체 (Event Object): 이벤트 콜백 함수의 첫 번째 매개변수(보통 e 또는 event)로 전달되며, 발생한 이벤트의 상세 정보를 담고 있습니다.
e.target: 이벤트가 실제로 발생한 DOM 요소를 가리킵니다. 실무에서 클릭된 버튼이나 입력된 텍스트 필드의 값을 가져올 때 필수적으로 사용됩니다.
e.preventDefault(): 태그가 가진 기본 동작을 강제로 취소합니다. (예: <a> 태그의 페이지 이동 막기, <form> 태그의 새로고침 현상 막기 등)

이벤트 객체 (Event Object): 이벤트 콜백 함수의 첫 번째 매개변수(보통 e 또는 event)로 전달되며, 발생한 이벤트의 상세 정보를 담고 있습니다.
e.target: 이벤트가 실제로 발생한 DOM 요소를 가리킵니다. 실무에서 클릭된 버튼이나 입력된 텍스트 필드의 값을 가져올 때 필수적으로 사용됩니다.
e.preventDefault(): 태그가 가진 기본 동작을 강제로 취소합니다. (예: <a> 태그의 페이지 이동 막기, <form> 태그의 새로고침 현상 막기 등)