Posted 프론트엔드 / Javascript0 visits

Wesbos - 이벤트 버블링 & 캡쳐 & 위임

브라우저가 JavaScript 명령을 어떤 방식으로 수행하는지 좀 더 자세히 배울 수 있는 챕터였다.

이벤트 버블링

💡 이벤트가 **”Bottom-Up 형식”**으로 전달되어 가는 특성을 의미한다 !

버블링

예시

1
2
3
4
5
6
7
<body class="body">
  <div class="one">
    <div class="two">
      <div class="three"><!-- 클릭 --></div>
    </div>
  </div>
</body>
1
2
3
4
5
6
7
const divs = document.querySelectorAll('div');

function check() {
  console.log(this.classList.value);
}

divs.forEach((div) => div.addEventListener('click', check));

결과 (이벤트 버블링)

세번째 요소 뿐만이 아니라, 상위 엘리먼트들인 two와 one에도 click이벤트에 따른 함수가 실행되는 것을 확인할 수 있다. “Trigger clicks all the way up”

버블링 결과...

이벤트 캡쳐

💡 이벤트 버블과 반대로 Top-Down 형식으로 해당 엘리먼트를 찾아 내려가고, 이벤트를 실행한다.

이벤트 캡처

예시 : addEventListener('OOO', function, {capture : boolean})

1
2
3
4
5
6
7
8
9
10
11
const divs = document.querySelectorAll('div');

function check() {
  console.log(this.classList.value);
}

divs.forEach((div) =>
  div.addEventListener('click', check, {
    capture: true,
  })
);

이번엔 오름차순!

이벤트 위임 방지

💡 event.stopPropagation()을 사용하면, 정확히 내가 이벤트를 발생시킨 엘리먼트에서만 이벤트가 발생한다.

event.stopPropagation()의 활용예시

1
2
3
4
5
6
7
8
const divs = document.querySelectorAll('div');

function check(e) {
  e.stopPropagation();
  console.log(this.classList.value);
}

divs.forEach((div) => div.addEventListener('click', check));

이벤트 위임의 활용

💡 Todo List를 만들때 자주 나타나는 현상인데,
Todo리스트에 대한 event가 잘 작동하다가 새로운 리스트가 추가됐을 때 새로운 리스트에는 이벤트가 동작하지 않는 경우가 많다.

event는 기존에 생성되어 있던 엘리먼트들에게만 적용되기 때문.

‼️이를 해결하기 위해선, 위임을 활용하면 된다

상위 요소에 이벤트리스너를 적용해주면, 위임에 의해 새로운 엘리먼트가 추가되어도
event가 추가된 요소에도 잘 할당된다.

Wesbos - 이벤트 버블링 & 캡쳐 & 위임

https://hoonjoo-park.github.io/javascript/wesbos/25. Bubling/

Author

Hoonjoo

Posted on

2022-01-05

Updated on

2022-02-07

Licensed under

#

Comments

×