.png)
👾 Westagram 댓글 삭제 기능을 구현하며 원하는 모든 값들이 정상적으로 console.log가 찍혔지만, 화면에는 구현이 안되는 일이 생겨 원인을 찾느라 한참 시간을 보냈다. 결국 멘토님의 도움으로 해결했는데, 그 원인이 바로 이벤트 버블링이었다. 나의 하루를 잡아먹은 이벤트 버블링에 대해 정리해둔다. (다음에 이벤트 버블링을 알지 못해서 헤매는 일은 없도록 하자.)
⏺ 이벤트 버블링이란?
- 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동(즉, 중복)되었을때 이루어지는 메커니즘이다.
- 이벤트 버블링이란 개념을 이해하기 위해서는 이벤트 캡쳐링과 함께 알아볼 필요가 있다. 둘은 메커니즘의 방향이 반대라 하나를 알면 다른 하나도 알게된다.
.png)
- 그림을 보면 캡쳐링과 버블링의 관계를 단번에 알 수 있다. 캡쳐링은 이벤트 핸들러를 가장 조상인 html에서 부터 시작하여 자식요소 들어가며 찾고, 버블링은 반대방향으로 이벤트 핸들러를 찾아간다.
- 버블링: 자식요소 -> 조상요소방향 / 캡쳐링: 조상요소 -> 자식요소방향
- 현재 대부분의 브라우저의 이벤트 핸들러들은 기본적으로 버블링 단계로 이루어진다.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>- 해당 예문에서 각 div별 이벤트 핸들러를 적용하였을때 가장 하위요소 class="three"의 이벤트를 작동시키면 이벤트 버블링에 따라 class="one" -> class="two" -> class="three"순으로 이벤트가 작동한다.
- class="two"에서 이벤트를 작동시키면? 이벤트 버블링에 따라 class="one"에만 이벤트가 작동한다.
- 이벤트 캡쳐링은 반대방향으로 작동한다.
🤔 이벤트 버블링에 따른 이벤트 간 충돌은 자식요소에서 상위요소로 가는 단계에서 이벤트 핸들러가 중복으로 확인 및 실행되어 실제로 target한 요소에서 원하는 event가 구현되지 않는 경우를 의미한다. (이벤트 버블링 자체는 브라우저가 이벤트 핸들러를 탐색하는 방법일 뿐 기능을 구현하는데서 방해가 되는 부정적인 사건을 의미하는 것은 아니다.)
👉 따라서, 이벤트 버블링을 고려하여 이벤트 핸들러 사용 시,
- 1개의 이벤트 핸들러에는 1개의 이벤트만 사용
- 직접 작용하는 요소에 핸들러 사용.
- 동일한 이벤트 핸들러를 여러요소에 사용 시, 하위요소 -> 상위요소 방향에 따라 작동.
- 다른 요소에 같은 이벤트를 사용할 경우 이벤트 핸들러를 어떻게 탐색하고 구현하는지 반드시 고려
⏺ 이벤트 번식(연쇄 동작)을 막는 방법: Event.stopPropagation()
function logEvent(event) {
event.stopPropagation();
}- 이벤트 버블링이나 이벤트 캡쳐링 메커니즘에 따라 이루어지는 이벤트 연쇄 작동을 막는 방법이다.
- 사용 시 이벤트 버블링의 경우 최하위 요소만 이벤트를 작동시키고, 이벤트 캡쳐링의 경우 최상위 요소만
참고 사이트
본질은 개발자 그 자체가 아니라, 개발을 임하고 해내는 방식에서 드러난다.
도영님! 이벤트 버블링에 대해서 잘 정리해주신 것 같아요!
위에서 이벤트 버블링을 막기 위해서 Event.stopPropagation()을 소개해주셨는데
이벤트 버블링 자체는 막지 않으면서 의도치 않은 동작을 막기 위한 로직으로
if(e.target !== e.currentTarget){
return;
}
도 있는 것으로 알고 있어요!
만약 버블링을 이용해서 다른 동작을 일으키고 싶은 경우가 있을때는( 나 또는 동료가) 위와 같은 코드를 통해서
필요없는 버블링으로 인한 부작용은 제어하면서 효율적으로 이용할 수 있을 것 같습니다!
한달동안 정말 수고하셨고! 남은 기간도 화이팅해요!