🖱 마우스 이벤트
click : 사용자가 클릭하거나 엔터키를 누를때 발생
사용방법👇
요소.onclick = function() {}
요소.addEventListener("click", () => {})
dblclick : 마우스 버튼을 두 번 연속 더블 클릭하면 발생.
mousedown : 마우스 버튼을 누를때 발생. 키보드에서는 발생하지 않는다.
mouseup : 사용자가 마우스 버튼을 누르고 있다가 놓을 때 발생.
mouseover : 마우스 커서가 요소 밖에 있다가 요소경계안으로 이동할때 발생
mouseout : 마우스 커서가 요소 위에 있다가 다른 요소 위로 이동할때 발생
mousemove : 마우스 커서가 요소 위에서 이동하는 동안 계속 발생.
contextMenu : 마우스 우측 클릭시, 컨텍스트 메뉴 보이기 직전에 발생
⌨️ 키보드 이벤트
keydown : 사용자가 키를 처음 누를 때 발생, 누르고 있는 동안은 계속 발생
keyup : 사용자가 키에서 손을 떼면 발생
keypress : 키를 누른 결과로 문자가 입력될 때 발생, 누르고 있는 동안은 계속 발생
DOM 레벨 3에서는 keypress가 삭제되고 대신 textInput 사용권장
🔍 Focus 이벤트
blur : 포커스를 잃을때 발생
focus : 포커스 받을때 발생
focusin : 포커스 받을때 발생, 버블링 버전입니다.
focusout : 포커스 잃을때 발생, 버블링 버전입니다.
𝍃 폼 이벤트
submit : 폼 제출 버튼을 누르거나 엔터키를 누룸
reset : 폼을 초기화하기 위함
change : 폼 필드에서 변경이 일어날 때 발생
(ex. input 요소의 텍스트 변동, radio 버튼의 클릭 등)
focus : 웹브라우저가 특정 요소에 집중할 때 발생 (ex. 해당 요소를 클릭, 마우스 커서를 놓을때 등)
blur : focus의 반대 (ex. 탭 누름, 필드 밖을 클릭할 때 등)
select : 텍스트 필드 등의 텍스트를 선택했을 때
📄 문서 / 창 이벤트
load : HTML 문서 및 추가 자원(이미지 등)들을 모두 불러왔을 때 발생
DOMContentLoaded : HTML 문서를 읽고 DOM 트리 구축을 완료할 때 발생
위 load와 달리, 이미지 로드,스타일시트 등을 기다리지 않고 바로 시작
unload : load이벤트와 반대로 문서를 완전히 닫을 때 발생
resize : 브라우저 창의 높이나 너비가 바뀔때 발생
scroll : 문서를 스크롤하는동안 반복 실행
event.preventDefault() : submit시에도 새로고침 안됨.
event 객체의 preventDefault 메서드는,
이벤트가 기본적으로 가지고 있는 행위를 멈추도록 만들어 줍니다.
주로 a태그와 submit을 사용할때 쓰이는데,
a 태그에 사용하면 href를 통해 이동하지 않도록 만들어주고
submit에 사용하면 창이 새로고침하여 실행되는 것을 막아줍니다.
❓부가설명.. 왜 submit을 사용하면 새로고침이 되나요?
submit 이벤트는 해당 폼을 action에 지정한 URL로
전달하는 행위를 기본으로 가지고 있기에 새로고침이 됩니다.
때문에 preventDefault메서드를 사용하지 않고 sumit을 사용하면
제출과 동시에 새로고침이 되면서 초기 화면으로 돌아오게 됩니다.
따라서 sumit을 사용할 때는 preventDefault메서드를
사용하여 새로고침이 되는 것을 막아주어야 합니다.event.stopPropagation() : 버블링을 막아준다.
Bubble 버블링 => 어떤 컴포넌트를 클릭했을 때, 부모로 계속 이벤트를 전파하는 것.
*버블링을 멈추려면 함수 안에 event.stopPropagation()을 추가해야 한다.
------
Capture 캡처링 => 부모가 내 자식들 중 누가 클릭 되었는가를 확인.
*기본값이 false이다.
추가하려면 {capture: true}를 넣어서 사용해야 한다.