• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

e.stopPropagation()에 대해서 질문있습니다.

20.12.16 21:40 작성 조회수 124

3

e.stopPropagation()으로 이벤트 버블링을 막지 않으면
remove 버튼을 클릭했을 때 상위태그인 li태그(검색기록)의 이벤트가 같이 발생해서

검색기록 제거와 동시에 해당 li 클릭으로 인해 검색이 되어서 검색결과도 같이 출력이 된다로 이해했는데요.

저는 stopPropagation 사용 안하고 KeywordView의 onClickKeyword 함수에 `  if(e.target.tagName == 'BUTTON'){ return ;  }`를 추가해 동일한 기능을 하도록 했습니다.

제가 잘 이해했는지, 뭐가 더 권장되는 방법인지 궁금하고 맞게 사용했는지 궁금합니다. 

답변 1

답변을 작성해보세요.

3

네 정확이 이해하셨습니다.

이벤트 객체의 targetName으로 식별하는 것도 같은 결과를 낳기는 한데요. '읽기 쉬운 코드인가?'라는 의문이 듭니다. 여기서 'BUTTON'이 삭제 버튼인지 아닌지는 바로 알기 어렵기 때문이에요. 그리고 삭제 버튼 말고도 다른 버튼이 발생한 이벤트도 무시해 버릴수 있기 때문에 의도한대로 동작하지 않을 수도 있고요.

명확하게 '이벤트 전파를 막겠어'라는 의도의 stopPropagation() 함수 사용을 추천 드립니다.