Event

이벤트는 사용자 행위나 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다.

‘click’ 이벤트를 발생시키기 위해서는 사용자가 버튼을 클릭한다던지, HTMLElement.click() 을 이용한다던지,

이벤트를 정의한 후 EventTarget.dispatchEvent()를 이용하여 프로그래밍으로 만들어낼수도 있습니다.

부모 엘리먼트와 자식 엘리먼트의 위치가 겹쳐있을때 이벤트는 양쪽 모두에서 일어나는데, 이벤트 처리 순서는

이벤트 확산, 캡쳐의 설정에 따라 달라집니다.

이벤트 버블링 (Event Bubbling)

이벤트가 발생됐을때 그 이벤트가 상위 엘리먼트로 퍼져나가는 현상을 말합니다.

이벤트는 기본적으로 버블링됩니다.

div내부에 button이 있고, button을 클릭하면 button의 click이벤트가 발생하고,

div 또한 click이벤트가 발생합니다. div의 click을 막고싶다면 아래에서 설명할

stopPropagation을 사용하세요

이벤트 캡쳐는 이벤트 버블링의 반대방향으로 퍼져나가는 것을 뜻합니다.

이벤트 위임은 단순히 상위 엘리먼트에 이벤트를 붙인걸 의미합니다.

<tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>

td를 클릭했을때의 이벤트를 등록할때 td에 등록하지않고, tr이나 tbody에 이벤트를 붙이고 활용하는것을

단순히 이벤트 위임이라고 표현합니다.

상위에서 이벤트를 감지하면, 하위 요소들이 바뀌는것에 조금 더 유연한 설계를 할 수 있죠.

대신 상황에 따라 분기처리가 필요합니다.

=> 의도한 EventTarget이 맞는지, 자식 요소가 있다면 자식요소를 포함하고 있는지 contains로 검사

이벤트리스너는 등록하고 사용후 적절한 타이밍에 삭제해줘야합니다 => 메모리릭

EventTarget.addEventListener(type, listener, useCapture);
EventTarget.removeEventListener(type, listener, useCapture);

3가지 파라미터의 레퍼런스가 일치해야 삭제에 성공합니다.

useCapture는 버블링 대신 캡쳐를 선택할 수 있습니다.

Event.target // 이벤트가 처음에 발생했던 대상의 참조입니다.
Event.stopPropagation() // 이벤트의 DOM 내 추가 확산을 방지합니다.
Event.preventDefault() // 취소 가능한 경우 이벤트를 취소합니다.