🎇 이벤트

✨ 이벤트 종류

마우스 이벤트

• mousedown : 마우스 버튼을 누르는 순간
• mouseup : 마우스 버튼을 눌렀다 떼는 순간
• click : 왼쪽 버튼을 클릭한 순간
• dblclick : 왼쪽 버튼을 빠르게 두 번 클릭한 순간
• contextmenu : 오른쪽 버튼을 클릭한 순간
• mousemove : 마우스를 움직이는 순간

• mouseover : 마우스 포인터가 요소 위로 올라온 순간
• mouseout : 마우스 포인터가 요소에서 벗어나는 순간
• mouseenter : 마우스 포인터가 요소 위로 올라온 순간(버블링이 일어나지 않음)
• mouseleave : 마우스 포인터가 요소에서 벗어나는 순간(버블링이 일어나지 않음)

키보드 이벤트

• keydown : 키보드의 버튼을 누르는 순간
• keypress : 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음)
• keyup : 키보드의 버튼을 눌렀다 떼는 순간

✨ input태그 다루기

포커스 이벤트

• focusin : 요소에 포커스가 되는 순간
• focusout : 요소로부터 포커스가 빠져나가는 순간
• focus : 요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
• blur : 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)

입력 이벤트(input태그)

• change : 입력된 값이 바뀌는 순간
• input : 값이 입력되는 순간
• select : 입력 양식의 하나가 선택되는 순간
• submit : 폼을 전송하는 순간
  스크롤 이벤트
• scroll : 스크롤 바가 움직일 때

윈도우 창 이벤트

• resize : 윈도우 사이즈를 움직일 때 발생

✨ 이벤트 객체 프로퍼티

1. 공통 프로퍼티

• type : 이벤트 이름 ('click', 'mouseup', 'keydown' 등)
• target : 이벤트가 발생한 요소
• currentTanrget : 이벤트 핸들러가 등록된 요소
• timeStamp : 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)
• bubbles : 버블링 단계인지를 판단하는 값
  

2. 마우스 이벤트

• button : 누른 마우스의 버튼
  1. 0: 왼쪽
  2. 1: 가운데(휠)
  3. 2: 오른쪽
  4. 3: X1 (일반적으로 브라우저 뒤로 가기 버튼)
  5. 4: X2 (일반적으로 브라우저 앞으로 가기 버튼)

• clientX, clientY : 보여지는 화면을 기준으로 마우스 커서의 브라우저 표시 영역에서의 위치
  client : 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역
• pageX, pageY : 전체문서를 기준으로 마우스 커서의 문서 영역에서의 위치
• offsetX, offsetY : 마우스 커서의 이벤트 발생한 요소에서의 위치 (상단의 모서리 : (0, 0))
  

• screenX, screenY : 마우스 커서의 모니터 화면 영역에서의 위치
• altKey : 이벤트가 발생할 때 alt키를 눌렀는지
• ctrlKey : 이벤트가 발생할 때 ctrl키를 눌렀는지
• shiftKey : 이벤트가 발생할 때 shift키를 눌렀는지
• metaKey : 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키)

3. 키보드 이벤트

• key : 누른 키가 가지고 있는 값(K ='K')
• code : 누른 키의 물리적인 위치
• altKey : 이벤트가 발생할 때 alt키를 눌렀는지
• ctrlKey : 이벤트가 발생할 때 ctrl키를 눌렀는지
• shiftKey : 이벤트가 발생할 때 shift키를 눌렀는지
• metaKey : 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키)

👧 참조 링크
이벤트
마우스 이벤트
키보드 이벤트

✨ 버블링과 캡처링

• 버블링 : 자식 요소에서 부모 요소로 이벤트가 전파되는 것
• 캡쳐링 : 이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대 방향으로 진행되는 이벤트 전파 방식
  

  이벤트가 발생하면 가장 먼저 window 객체에서부터 target 까지 이벤트 전파가 일어납니다. (캡쳐링 단계)
  그리고 나서 타깃에 도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계)
  이후 다시 window 객체로 이벤트가 전파됩니다. (버블링 단계)

• 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달

for (let elem of document.querySelectorAll('*')) {
      elem.addEventListener("click", e => alert(`캡쳐링 단계: ${elem.tagName}`), true);
      elem.addEventListener("click", e => alert(`버블링 단계: ${elem.tagName}`));
    }

• stopPropagation : 이벤트 전파를 막는다

stopPropagation();

✨ 이벤트 위임

• 버블링 개념을 활용하여 효과적인 이벤트 관리 방법
• 자식 요소의 이벤트를 부모 요소에 위임하여 사용
• 이벤트 위임을 잘 활용하면 훨씬 더 효율적으로 이벤트를 다룰 수 있다.

✨ 브라우저의 기본 동작

• 브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작들이 있다.
• 예시

1. 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴 창이 뜬다
2. input 태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력된다

• preventDefault : 브라우저의 기본동작을 막을 수 있다.

function someHandler(event) {
  event.preventDefault();
}