💻 이벤트 버블링과 이벤트 위임

waterglasses·2022년 4월 8일

TIL

목록 보기

16/50

이번 챕터는 이벤트 버블링과 이벤트 위임에 대해서 다루었습니다.~0~
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

📃 오늘 공부한 것

<div onclick="alert('div에 할당한 핸들러!')">
  <em><code>EM</code>을 클릭했는데도 <code>DIV</code>에 할당한 핸들러가 동작합니다.</em>
</div>

위의 예시에서 보이듯 <em>을 클릭했음에도 <div>에 할당한 핸들러가 동작한다. 이 이유가 무엇일까? 바로 이벤트 버블링 때문이다.

이벤트 버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 대까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

위의 예제에서 일어나는 일을 순서대로 알아보자.
1. 우선 <p>에 할당된 onclick이 동작한다.
2. 그 다음 <div>에 할당된 onclick이 동작한다.
3. 그 다음은 <form>에 할당된 onclick이 동작한다.
4. 마지막으로 document 객체를 만날 때까지 각 요소에 할당된 onclick 핸들러가 동작한다.

이런 흐름을 이벤트 버블링이라고 부른다.

event.target

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있다. 이벤트가 발생한 가장 안쪽 요소는 target요소로 불리고 event.target을 사용해 접근할 수 있다.

이벤트 위임

캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(이벤트 델리게이션)을 구현할 수 있다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용한다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다를 수 있다.

공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다.

즉 다음과 같은 알고리즘으로 동작한다.
1. 컨테이너에 하나의 핸들러를 할당한다.
2. 핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아낸다.
3. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링한다.

🔥 오늘의 느낀점

어제 과제 제출을 하고 오늘 면접 스터디를 진행하였다. 아무래도 시간이 없어서 준비가 많이 미흡했던 것 같다. 분명 아는데 말로 뱉는다는 것은 참 어려운 일이다.😂 면접을 할 때 어떻게 해야하는지 조금, 아주 조금 알게 되었다. 다음 면접부터는 발전된 모습이 보였으면 좋겠다.

또한, 강의를 15일동안 진행하면서 처음으로 밀렸다.🤯 3개밖에 안남아서 다 듣고 자고 싶었지만.. 에러가 내 발목을 붙잡았다.ㅠㅠ 강의는 분명 20분짜리인데 왜 난 1시간 이상을 쓰는건지,, 이해하면서 실습 따라가는 것 조차 벅찼다. 컴포넌트 분리, 낙관적 업데이트(이건 내일 강의를 다 듣고 정리해보도록 하겠다)도 생각해서 코딩을 해야한다는 것. 매우 흥미로웠고 프론트엔드 개발자의 역할도 살짝 엿본 느낌ㅎㅎ.
강의에서 중간에 이벤트 위임(event delegation)을 사용해서 코드를 작성하였는데 어제 과제에서 내가 사용했던 내용이었다. 사실 쓰는 이유를 명확하게 알지 못했는데 그 부분을 해결하게 되어서 좋았다.

어제 로토의 특강이 있었는데 덕분에 여러부분에서 깨달음도 얻고 자극도 받았다. 사실 작년에 프젝할 때 nuxt.js를 사용했었는데 왜 ssg를 사용하는지 모르고 사용했었다. 사용해봐서 특강을 들을 때 더욱 흥미로웠지만 그만큼 과거의 나는 아는 것이 정말 없었구나 싶었다.😂

주말에 스터디 공부도 하고 밀린 강의 얼른 듣자!