✅ 1. 이벤트(Event)란?

• 정의: 사용자의 행위(마우스 클릭, 키보드 입력 등)나 브라우저 상태 변화(페이지 로딩 등)를 자바스크립트에 알리는 통지.
• 종류 예시:
  • 사용자: click, keydown, submit, mouseover
  • 브라우저: load, resize, scroll, error

✅ 2. 이벤트 리스너(Event Listener)

• 정의: 특정 이벤트 발생 시 실행되는 자바스크립트 코드
• 작성 방식:
  1. HTML 태그 내부에 직접 작성
  2. DOM 객체의 이벤트 프로퍼티에 할당
  3. addEventListener() 메서드 사용
  4. 익명 함수 활용

✅ 3. 이벤트 리스너 예제 비교

<!-- HTML 태그 내부 -->
<p onmouseover="this.style.backgroundColor='orchid'">올려보세요</p>

<!-- DOM 프로퍼티 이용 -->
p.onmouseover = function () { this.style.backgroundColor = 'orchid'; };

<!-- addEventListener 사용 -->
p.addEventListener("mouseover", function () {
  this.style.backgroundColor = "orchid";
});

✅ 4. 이벤트 객체 (Event Object)

• 정의: 이벤트 발생 시 전달되는 정보 객체
• 전달 방식:
  • function(e) {...} 에서 e가 이벤트 객체
  • HTML 태그에서는 onclick="handler(event)" 형태

function f(e) {
  alert(e.type);  // 이벤트 타입 출력
}

• 주요 프로퍼티:
  • e.type: 이벤트 종류
  • e.target: 이벤트가 발생한 요소
  • e.clientX, e.clientY: 마우스 위치
  • e.defaultPrevented: 기본 동작 차단 여부

✅ 5. 이벤트 기본 동작 방지 (preventDefault)

<!-- 링크 이동 방지 -->
<a href="<http://naver.com>" onclick="event.preventDefault();">네이버</a>