DOM 이벤트 관리 - ChoDragon9/posts GitHub Wiki

DOM 이벤트 라이프사이클

useCapture 매개변수를 사용해 핸들러의 실행 순서를 반대로 할 수 있다. 즉, addEventListener를 호출 할 때 useCapture 매개변수에 ture를 사용하면 버블 단계 대신 캡처 단계에 이벤트 핸들러를 추가한다는 것을 의미한다.

생성된 모든 DOM 이벤트에 대해 브라우저는 캡처 단계(하향식)를 실행한 다음 버블 단계(상향식)를 실행한다는 것을 명심하자, 목표 단계라고 하는 세 번째 단계도 있다. 이 특별한 단계는 이벤트가 목표 요소에 도달할 때 발생한다.

<div>
  <button>Button</button>
</div>

<script>
  const button = document.querySelector('button');
  const div = document.querySelector('div');

  div.addEventListener('click', () => {
    console.log('[Capture] Div');
  }, true);

  div.addEventListener('click', () => {
    console.log('[Bubble] Div');
  }, false);

  button.addEventListener('click', () => {
    console.log('[Capture] Button');
  }, true);

  button.addEventListener('click', () => {
    console.log('[Bubble] Button');
  }, false);
</script>
[Capture] Div
[Capture] Button
[Bubble] Button
[Bubble] Div

사용자 이번트 정의

detail 객체를 사용해 추가 데이터를 핸들러에 전달할 수 있다.

const EVENT_NAME = 'FiveCharInputValue'
const button = document.querySelector('button')

button.addEventListener('click', () => {
  const event = new CustomEvent(EVENT_NAME, {
    detail: {
      date: Date.now()
    }
  });
  button.dispatchEvent(event);
});

button.addEventListener(EVENT_NAME, (e) => {
  console.log(e);
})

템플릿 엘리먼트

template 태그는 이름에 알 수 있듯이 렌더링 엔진의 스탬프로 사용할 수 있는 보이지 않는 태그다.

template 내에 있는 태그들은 검색안됨.

<template id="todo-item">
  <li></li>
</template>
<script>
console.log(document.querySelector('li')); // null
</script>
⚠️ **GitHub.com Fallback** ⚠️