input,label을 감싸는 div click event가 두 번 실행되는 이슈

이 글로 얻을 수 있는 정보

1. Event와 CustomEvent ( + dispatchEvent )
2. 합성 이벤트의 개념 
3. 이벤트 발생 방식 및 순서
4. input,label에서 click event가 두 번 실행되는 이슈의 해결 방법

 

0. 개요

업무(Next.js 14, storybook 사용 중) 코드 리뷰 중 다음 예시와 같이 input과 label을 연결 후, onClick 이벤트를 넣은 div로 감싸는 마크업을 구성하게 되면 label 영역을 눌렀을 때 click event가 두 번실행되는 이슈가 발생하여 해당 이슈에 대해 알아보려고 합니다.

See the Pen Untitled by 윤창현 (@ibgcsnij-the-selector) on CodePen.

 

 

 

 

 

1. 문제 접근 방법

1-1. bubbling과 capturing 연상

해당 이슈를 접하고 제일 먼저 bubbling과 capturing 을 떠올렸지만 stgopPropagation 메서드만으로 해결되지 않았고 일반적인 버블링의 구조에서는 다음과 같이 부모 요소 내 중첩된 자식요소가 2개 이상이 있더라도 부모 요소가 2번 실행되는 현상이 발생하지 않았습니다.

See the Pen Untitled by 윤창현 (@ibgcsnij-the-selector) on CodePen.

 

 

 

 

그래서 관련된 코드 상의 다른 이슈들(useRef, aria-labelledby, storybook)을 찾아보았으나, click event와 연관된 내용은 찾아볼 수 없었습니다.

 

버블링과 캡처링 관련 문서

 

 

1-2. preventDefault로 click event가 두 번 실행되는 이슈를 해결하였으나...

다른 팀원의 도움으로 preventDefault를 사용하면 해당 이슈를 해결할 수 있음을 확인하였으나, 정확한 원인 확인이 어려워 stack overflow에 관련된 원인을 찾기 시작하였습니다.

 

1-3. stack overflow에서 관련된 원인 발견

stack overflow에서 아래와 같은 답변을 찾게 되었습니다.

---

This happens because of what the HTML spec describes at 4.10.4:

For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:

<label><input type=checkbox name=lost> Lost</label>

 

On other platforms, the behavior might be just to focus the control, or do nothing.

 

This means that when a <label> is clicked, the browser creates a second "synthetic" click event on the associated <input> element, in order to toggle its state.

 

The reason divClicked is triggered twice, is because the first event which comes from the <label> bubbles up to the <div>, and also the second, synthetic click event bubbles up to the <div>.

---

위 내용을 간략하게 해석해보면 다음과 같습니다.

• 예시 코드에서 checkbox를 감싸고 있는 label을 클릭하면 합성 클릭 이벤트(합성 클릭 활성화 단계)를 실행하도록 되어 있다
  • 브라우저가 상태를 전환하기 위해 label을 클릭하면 연결된 checkbox input 요소에 두 번째 합성 클릭 이벤트를 생성한다는 의미(기존 checkbox input의 이벤트는 label과 연결됨)
• 결국 div의 click event가 두 번 실행되는 이유는 다음과 같다
  • label에서 발생하는 첫 번째 이벤트가 div까지 bubbling 되어 div click event 첫 번째 실행
  • checkbox input 요소에 생성된 두 번째 이벤트가 div까지 bubbling 되어 div click event 두 번째 실행

저는 처음 답변을 봤을 때 합성 이벤트와 event 발생 방식에 관현 개념을 몰라, 한 번에 이해하기 어려웠습니다.

그래서 합성 이벤트의 개념과 답변자가 첨부한 관련문서를 통해 event 발생 방식과 관련된 키워드를 알아보았습니다.

 

2. 합성 이벤트와 커스텀 이벤트

mdn에서 Event 대해 찾아 보면 다음과 같은 설명이 나옵니다.

The Event() constructor creates a new Event object. An event created in this way is called a synthetic event, as opposed to an event fired by the browser, and can be dispatched by a script.

즉, new Event로 이벤트를 생성하면 브라우저에 의해 발생된 이벤트와 달리 합성 이벤트 라고 하며, 스크립트에 전달된다고합니다.

 

여기서 합성 이벤트 키워드가 나오는데, 스크립트에 의해 전달 된다는 의미가 한 번에 이해되지않습니다.

관련된 내용은 모던 자바스크립트 사이트의 커스텀 이벤트를 보면 이해할 수 있는데, 해당 링크에서 click event가 두 번 실행되는 이슈와 관련된 내용을 정리해보겠습니다.

( 해당 글에 bubbles(bubbling), cancelable(preventDefault), isTrusted 등 좋은 내용들이 많으니 꼭 읽어보시는 걸 추천드립니다. )

 

2-1. Event,CustomEvent와 dispatchEvent

• new Event와 new CustomEvent를 통해 script에서 브라우저 이벤트(ex. button element의 click 이벤트)와 다른 커스텀 이벤트를 생성할 수 있다
  • Event는 내장 이벤트, 커스텀 이벤트 둘 다 올 수 있음
  • CustomEvent는 Event와 달리 이벤트 관련 정보를 명시해 줄 수 있음 (다른 이벤트와 충돌 회피)
  • isTrusted : 스크립트를 통해 생성되는 이벤트는 false, 사용자 액션(브라우저 이벤트)를 통해 만든 이벤트는 true
• 생성한 이벤트는 dispatchEvent 메서드를 통해 이벤트를 실행시키면 일반 브라우저 이벤트처럼 addEventListner로 감지할 수 있다
  • 이벤트 생성 시 cancelable: true로 설정한 경우 preventDefault 메서드를 실행하면 dispatchEvent의 return 값이 false가 된다 (이 방식 때문에 preventDefault를 사용하면 기존 이벤트를 취소할 수 있었던 것)

See the Pen Event, CustomEvent by 윤창현 (@ibgcsnij-the-selector) on CodePen.

 

 

 

3. 이벤트 발생 방식

https://html.spec.whatwg.org/multipage/webappapis.html#fire-a-click-event

위 문서에서 볼 수 있는 이벤트 발생 방식은 다음과 같습니다.

이벤트 이름을 test_event라고 가정하며, 위 문서에서 말하는 이벤트 발생 방식은 기본 브라우저 이벤트를 말하는 것 같습니다.

1. PointerEvent를 사용하여 이벤트를 생성합니다.
2. 이벤트 type을 test_event로 초기화합니다.
3. bubbles와 cancelable 속성을 true로 초기화합니다. (default 값)
4. composed 속성 값을 설정합니다.
   1. composed : 이벤트가 해당 대상의 루트인 ShadowRoot 노드를 지나 리스너를 호출하면 true이고, 그렇지 않으면 false
5. isTrusted 속성 값 설정
6. 키 입력 장치의 현재 상태에 따라 이벤트의 ctrlKey, ShiftKey, altKey 및 MetaKey 속성이 있는 경우 초기화합니다. (사용할 수 없는 키의 경우 false)
7. view 속성 값을 window 객체로 초기화 합니다. (없는 경우 null)
8. 이벤트의 getModifierState() 메소드는 키 입력 장치의 현재 상태를 적절하게 설명하는 값을 반환하는 것 입니다.
   1. getModifierState() : 지정된 수정자 키의 현재 상태를 반환합니다. 수정자가 활성 상태이면(즉, 수정자 키가 눌리거나 잠긴 경우) true이고, 그렇지 않으면 false
9. 이벤트 결과를 반환합니다. (dispatchEvent)

이벤트 발생 방식에서 우리가 알아봤던 이벤트의 다양한 개념이 나온다는 것을 알 수 있습니다.

( 여기서 composed 속성에서 Shadow Dom의 Shadow Root에 대한 개념이 나오는데, 여기서 설명하기엔 너무 길어지니 아래 링크를 참고하는 것을 추천드립니다.)

 

Shadow Dom 관련 링크

• 웹 컴포넌트 - MDN
• Shadow Dom 사용하기 - MDN
• Shadow Dom 사용 사례 - Shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법(인프런)

 

4. 원인 분석

이제 알아본 개념으로 1-3에서 발견한 원인을 다시 분석해보겠습니다.

• 예시 코드에서 checkbox를 감싸고 있는 label을 클릭하면 합성 클릭 이벤트(합성 클릭 활성화 단계)를 실행하도록 되어 있다 
  • 브라우저가 상태를 전환하기 위해 label을 클릭하면 연결된 checkbox input 요소에 두 번째 합성 클릭 이벤트를 생성한다는 의미(기존 checkbox input의 이벤트는 label과 연결됨)

• 결국 div의 click event가 두 번 실행되는 이유는 다음과 같다
  • label에서 발생하는 첫 번째 이벤트가 div까지 bubbling 되어 div click event 첫 번째 실행
  • checkbox input 요소에 생성된 두 번째 이벤트가 div까지 bubbling 되어 div click event 두 번째 실행

💡 분석
1. checkbox를 감싸고 있는 label을 클릭하면 new Event로 checkbox와 연결된 이벤트를 실행시키는 합성 클릭 이벤트 생성 (2.합성 이벤트와 커스텀 이벤트)
2. new Event로 생성한 이벤트는 bubbles default 값이 ture이기 때문에 bubbling되어 div event 실행
3. 기존 checkbox의 이벤트 실행으로 bubbling되어 div event 두 번 실행하게 됨

 

순서를 정리해보자면, 다음과 같습니다.

1. 합성 클릭 event 생성
2. 합성 클릭 event 실행
3. div event  bubbling
4. checkbox event 실행
5. div event  bubbling

때문에 0. 개요의 코드에서 노출되는 alert 순서가 div -> input -> div 인 것입니다. (새롭게 생성된 합성 클릭 event에는 alert이 없으므로 bubbling 된 div가 먼저 노출되는 것)

 

위 순서를 이용하게 되면 div event가 두 번 실행되는 현상에 대해 두 가지 해결 방법을 도출할 수 있습니다.(다음 예시 코드 참고)

1. div event에 preventDefault 메서드를 사용하여 3번 과정에서 기존 checkbox event를 dispatchEvent로 실행할 때 false가 되어 checkbox event가 중단되어 중복 실행 방지 -> 4,5번 과정이 생략되어 예시 코드에서도 div alert만 노출됨
2. 기존 checkbox event에 stopPropagation 메서드를 사용하여 기존 checkbox event에서 bubbling을 막아 중복 실행 방지 -> 5번 과정이 생략되어 div alert -> checkbox alert 순으로 노출됨

See the Pen input,label issue solution1 by 윤창현 (@ibgcsnij-the-selector) on CodePen.

 

 

See the Pen input,label issue solution2 by 윤창현 (@ibgcsnij-the-selector) on CodePen.

 

 

 

마치며

그냥 지나칠 수도 있었던 문제였지만, 하나 하나 분석해보며 이벤트와 관련된 다양한 개념과 작동 원리 등을 파악할 수 있어서 뜻 깊은 시간이었던 것 같습니다.

최대한 알기 쉽게 작성하려고 노력하였는데, 이해가 안되는 부분이 있으시거나 틀린 부분이 있다면 적극적인 피드백 부탁드리겠습니다.

긴 글 봐주셔서 감사합니다. 🙏