버블링

: 한 요소에 이벤트가 발생하면

event target: 이벤트가 처음 마주친 대상

eventcurrentTarget:이벤트가 걸린 대상(=this)

캡쳐링은 밑에서부터 순서대로

이벤트위임(event delegation)

let selectedTd;

table.onclick = function(event) {
  let target = event.target; // 클릭이 어디서 발생했을까요?

  if (target.tagName != 'TD') return; // TD에서 발생한 게 아니라면 아무 작업도 하지 않습니다,

  highlight(target); // 강조 함
};

정확한 태그만 해당 함수를 실행(조건분기 return 해서 함수 중단), 어떻게든 해당 태그를 찾게 해야됨 (루프)

⬇️

table.onclick = function(event) {
  let td = event.target.closest('td'); // (1)

  if (!td) return; // (2)

  if (!table.contains(td)) return; // (3)

  highlight(td); // (4)
};

closest : 알잘딱깔센 ㅋ 부모에서 인접한 요소를 찾음(지형제는 못찾고요)

<div id="menu">
  <button data-action="save">저장하기</button>
  <button data-action="load">불러오기</button>
  <button data-action="search">검색하기</button>
</div>

dataset.action = e.target.getAttribute(’data-action’)