[TIL] Browser Event

Today I Learned

Browser Event Playground

이벤트 (Event)

• 이벤트란 어떤 시스템에서 일어난 사건(action)/발생(occurrence)를 말한다.
• 웹의 경우 이벤트는 브라우저 윈도우 안에서 일어난다.
• 브라우저 이벤트는 다양하다. 마우스를 클릭하거나 키보드를 누르는 것, 브라우저 창의 크기가 변하는 것, 웹 페이지 로딩이 완료되는 것 모두 이벤트의 한 종류다.

이벤트 핸들러 (Event Handler)

• 특정 이벤트가 발생하면 이를 감지하여 함수를 실행할 수 있다. 이렇게 이벤트에 반응하여 실행되는 함수를 이벤트 핸들러라고 한다.

이벤트 핸들러를 할당하는 3가지 방법

• Inline Event Handler
  • <button>Click</button>
  • 가급적 지양할 것. (관심사 분리)
• Event Handler Property
  • btn.onclick = handler
  • 한 요소에 여러 개의 이벤트 핸들러를 할당할 수 없음. 핸들러 추가 시 이전 핸들러를 덮어씀.
• addEventListener Method
  • btn.addEventListener('click', handler)
  • 한 요소에 여러 개의 이벤트 핸들러를 할당할 수 있음.
  • removeEventHandler로 할당한 특정 이벤트 핸들러를 제거할 수 있음.
  • DOMContentLoaded 이벤트의 경우 addEventListener로만 이벤트 핸들러를 할당할 수 있음.

이벤트 버블링 (Event Bubbling) & 이벤트 캡처링 (Event Capturing)

1. Capturing Phase : Window에서 시작하여 이벤트가 하위 요소로 전파되는 단계
2. Target Phase : 이벤트가 실제 타겟 요소에 전달되는 단계
3. Bubbling Phase : 타겟 요소에서 시작하여 이벤트가 상위 요소로 전파되는 단계

• 대부분의 이벤트 핸들러는 캡처링 단계가 아닌 버블링 단계에서 동작한다.
• 자식 요소에 이벤트가 발생하였을 때 : 자식 요소에 할당된 이벤트 핸들러 동작 -> 부모 요소에 할당된 이벤트 핸들러 동작 -> ... -> 최상단 요소에 할당된 이벤트 핸들러 동작

이벤트 객체 (Event Object)

• 이벤트가 발생할 때, 브라우저에서 동적으로 생성하는 객체로 해당 이벤트에 관한 상세한 정보를 담고 있다. 이벤트 핸들러의 첫 번째 인자로 전달된다. 주로 event, evt 또는 e라는 이름으로 사용된다.

event.target

• 실제로 이벤트가 발생한 요소

event.currentTarget

• 이벤트에 바인딩된 요소
• addEventListener 앞에 기술된 객체

event.preventDefault()

• Submit 버튼이나 링크를 누르면 다른 페이지로 이동하는 것이 default 동작이나 preventDefault()를 사용하여 이를 중단시킬 수 있다.

이벤트 핸들러 내부의 this

• Inline Event Handler 방식에서 this는 window 객체를 가리킨다.
• Event Handler Property 방식과 addEventListener 방식에서 this 는 이벤트에 바인딩된 요소, 즉 event.currentTarget을 가리킨다.
• 화살표 함수에서 this값은 호출된 곳이 아니라 선언된 곳의 영향을 받기 때문에 주의해야 한다. this보다는 event.currentTarget을 사용하도록 하자.