이벤트 버블링

이벤트 버블링이란?

HTML에서 event가 발생할 때, 부모 태그에도 순차적으로 동일한 이벤트가 발생하는 것을 말한다. (수면으로 올라가는 것처럼 이벤트가 부모에게도 순차적으로 퍼져 나가는 현상)

예시

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

// 틱택토 강의에서 가져온 코드
const callback = (event) => {
  if (event.target.textContent !== '') {
    console.log('빈칸이 아닙니다');
    return;
  }
  // 빈칸이면
  console.log('빈칸입니다');
  event.target.textContent = turn;
  turn = turn === 'O' ? 'X' : 'O';
};

for (let i = 0; i < 3; i++) {
  const $tr = document.createElement('tr');
  const cells = [];
  for (let j = 0; j < 3; j++) {
    const $td = document.createElement('td');
    cells.push($td);
    $tr.appendChild($td);
  }
  rows.push(cells);
  $table.append($tr);
}
$table.addEventListener('click', callback);

table태그에만 EventListener를 달아주었지만, <td>태그를 클릭해도 callback함수가 실행된다!

만약 정말 addEventLister가 달린 태그에 콜백함수를 실행시키고 싶다면?

currentTarget

  event.currentTarget.textContent

currentTarget을 사용하면 EventListener가 달린 태그에 접근할 수 있다.
(예시의 경우 <table> 태그)

Event Bubbling을 막고 싶다면?

event.stopPropagation을 콜백함수에 넣어준다

const callback = (event) => {
  event.stopPropagation();
  if (event.target.textContent !== '') {
    console.log('빈칸이 아닙니다');
    return;
  }
  // 빈칸이면
  console.log('빈칸입니다');
  event.target.textContent = turn;
  turn = turn === 'O' ? 'X' : 'O';
};