Event Listener | Notion

🧷 자주 쓰는 Event 종류 (이벤트 타입)

이벤트는 "click", "keydown" 같은 문자열로 구분돼.

🔘 마우스 이벤트

이벤트 이름	설명
`click`	클릭했을 때
`dblclick`	더블클릭
`mousedown`	마우스 버튼 누를 때
`mouseup`	마우스 버튼 뗄 때
`mousemove`	마우스가 움직일 때
`mouseenter`	요소에 마우스 진입 (버블 안 됨)
`mouseleave`	요소에서 마우스 나감 (버블 안 됨)
`mouseover`	요소 위에 마우스 올림
`mouseout`	요소 밖으로 마우스 나감
`contextmenu`	우클릭 메뉴

⌨️ 키보드 이벤트

이벤트 이름	설명
`keydown`	키 누름
`keyup`	키 뗌
`keypress`	(거의 안 씀, 이제 deprecated됨)

🧾 폼 이벤트

이벤트 이름	설명
`submit`	폼 제출
`change`	`<input>`, `<select>`, `<textarea>` 값 바뀔 때
`input`	input 요소에 입력이 있을 때 (실시간)
`focus`	포커스 됐을 때
`blur`	포커스가 빠질 때

📱 터치 이벤트 (모바일)

이벤트 이름	설명
`touchstart`	터치 시작
`touchmove`	터치 중 움직임
`touchend`	터치 끝남
`touchcancel`	터치 취소

📦 기타 이벤트

이벤트 이름	설명
`load`	페이지나 리소스 로드 완료
`resize`	창 크기 변경
`scroll`	스크롤될 때
`wheel`	마우스 휠 굴릴 때
`animationend`	애니메이션 끝날 때
`transitionend`	CSS 트랜지션 끝날 때
`drag`, `drop`	드래그 관련

🧩 `addEventListener()` 기본 문법

element.addEventListener("이벤트명", 콜백함수, 옵션);

예시:

button.addEventListener("click", function(e) {
  console.log("Clicked!", e);
});

📦 이벤트 객체 속성 (`event` 또는 `e`로 많이 씀)

이벤트 핸들러 안에서 쓰는 e 객체는 다양한 정보 포함해. 대표적으로: