개발자의 삶/Javascript

[javascript] 이벤트 전파 막기, 버블링 막기(bubbling)

들어가며 프로젝트 진행 중 다음과 같은 요청 사항이 들어왔다. 상단 헤더(부모 div)를 클릭하면, 헤더가 활성화되고 해당 div 내 list 들을 일정 주기로 refresh 되도록 하고, 내부 list(자식 div)를 클릭하면, 활성화된 헤더와는 별개로 리스트의 상세 정보를 일정 주기로 refresh 해주세요. 기본구조는 이러했다. 최초 화면 진입 시, 부모 div에 당일 리스트를 가져와서 보여주고, 리스트 내 가장 최근 항목의 상세정보를 보여준다. 리스트 내 다른 항목을 클릭하면, 해당 항목에 대한 상세정보를 보여준다. 실시간으로 데이터가 쌓이기 때문에, 여기에 추가적으로 클릭하지 않더라도 일정 주기마다 refresh 가 되는 기능 추가 요청이었다. 여기서 문제는 자식 div 가 활성화 된다면, 부모..