이벤트 위임

강성훈·2023년 4월 4일

기술면접

목록 보기

1/9

Example

익명제보 글을 위해 모달을 띄우는 경우 바깥 회색 부분이 클릭된다면 모달을 close하도록 제작하게 된다

Modal.addEventListener("click", () => {
	close(); // 모달 닫기
});

또한 내부 익명제보기하기에 제보 버튼 혹은 카드 클릭 시 다른 이벤트를 발생시켜야합니다.

Button.addEventListener("click", () => {
	writeRequest(); // 글쓰기 요청 함수
});

하지만 이는 HTML 을 보게된다면 다음과 같이 작성되어있습니다.

<Modal>
  <Card>
    <Button>제보</Button>
  </Card>
</Modal>

이 때 Button 클릭 시 당연하게도 writeRequest 함수가 실행된다 하지만 우리의 예상과 달리 close 함수 까지 실행되어 모달이 닫히게 되는 이슈가 발생한다. 이와 같이 상위로 혹은 하위까지 이벤트가 발생되는 현상이 존재하는데 이를 사용한 방식이 이벤트 위임이다.

버블링과 캡쳐링

클릭하여 하위로 혹은 상위까지 함수가 이벤트가 실행되는 것을 버블링, 캡쳐링이라고 한다.

버블링

버블링이란 특정 엘리먼트에서 이벤트 발생 시 해당 엘리먼트에 상위 요소까지 전달되는 현상을 말한다.

header > ul > li 이런 구조를 가지면서 모두 이벤트를 가져 콘솔을 출력하는 이벤트를 적용시켰다.

<header>
  header
  <ul>
    ul
    <li>li</li>
  </ul>
</header>

const header = document.querySelector("header");
const ul = document.querySelector("ul");
const li = document.querySelector("li");

header.addEventListener("click", () => {
  console.log("header")
})
ul.addEventListener("click", () => {
  console.log("ul")
})
li.addEventListener("click", () => {
  console.log("li")
})

이 상황에서 li에 이벤트를 발생시키게 될 경우 header까지 이벤트가 발생하는 것을 확인 할 수 있다.

이벤트 캡쳐링

캡쳐링이란 버블링과 반대로 부모에서 자식으로 이벤트를 넘겨주는 것을 말한다.
다만 캡쳐링은 버블링과 달리 default 값이 false이므로 true로 바꿔줘야 발생한다.

{capture: true}를 통해서 캡쳐링을 설정 할 수 있다.

const header = document.querySelector("header");
const ul = document.querySelector("ul");
const li = document.querySelector("li");

header.addEventListener("click", () => {
  console.log("header")
}, {capture: true})
ul.addEventListener("click", () => {
  console.log("ul")
},{capture: true})
li.addEventListener("click", () => {
  console.log("li")
}, {capture: true})

아까와 달리 li 클릭 시 header 부터 출력되는 것을 확인 할 수 있다.

버블링 캡쳐링 어떻게 없애야되;;

버블링과 캡쳐링은 얘기치 못한 상황에 발생하곤 한다.
따라서 버블링을 막고 싶을 땐 다음 메서드를 활용하여 방지한다.

e.stopPropagation()

버블링과 캡쳐링이 함께 일어난다면??

캡쳐링과 버블링이 함께 일어날 경우 3단계에 걸쳐 진행된다.

캡쳐링 단계: window에서 부터 차근차근 하위로 요청된다.

타켓 단계: 클릭된 타겟에 도달한다.

버블링 단계: 타겟에서 부터 다시 위로 요청된다.