들어가며
프로젝트 진행 중 다음과 같은 요청 사항이 들어왔다.
상단 헤더(부모 div)를 클릭하면, 헤더가 활성화되고 해당 div 내 list 들을 일정 주기로 refresh 되도록 하고,
내부 list(자식 div)를 클릭하면, 활성화된 헤더와는 별개로 리스트의 상세 정보를 일정 주기로 refresh 해주세요.
기본구조는 이러했다. 최초 화면 진입 시, 부모 div에 당일 리스트를 가져와서 보여주고,
리스트 내 가장 최근 항목의 상세정보를 보여준다. 리스트 내 다른 항목을 클릭하면, 해당 항목에 대한 상세정보를 보여준다.
실시간으로 데이터가 쌓이기 때문에, 여기에 추가적으로 클릭하지 않더라도 일정 주기마다 refresh 가 되는 기능 추가 요청이었다.
여기서 문제는 자식 div 가 활성화 된다면, 부모의 refresh 기능을 막아야 한다는 것이다.
이 때,
*이벤트 전파(버블링)*을 막아주어야 한다.
이벤트 전파(버블링)이란
하위요소에서 상위요소로의 이벤트 전파 방식 으로, 말그대로 HTML 구조상 자식요소에 발생한 이벤트가 상위의 부모요소에까지 영향을 미치는 것이다.
나의 경우에는
자식 div를 클릭해서 상세정보만 refresh 하고 싶은데, 부모 div 도 활성화 되어 list도 refresh 되는 것이다.
간단하게 예제로 만들어보자
$("#parent").on("click", function(){ // jquery click event 감지 console.log("부모 div"); });
$("#child").on("click", function(){
console.log("자식 div");
});
위처럼 코드가 있다고 가정한다면,
부모 div 를 클릭하면 "부모 div" 콘솔이 뜨지만
자식 div 를 클릭하면 "부모 div"와 "자식 div"가 둘 다 뜨게 된다.
이벤트 전파를 막기 위한 방법으로는 4가지가 있다.
1. preventDefault(); // 기본 이벤트를 제거
2. stopPropagation(); // 이벤트 전달을 제거
3. stopImmediatePropagation(); // 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 이벤트도 동작하지 않도록 중단.
4. return false; // jquery 를 사용하면 위 2,3을 모두 수행한 것과 같고, jquery 를 사용하지 않으면 preventDefault 와 같다.
나의 경우에는 stopImmediatePropagation를 사용했다.
$("#parent").on("click", function(){ // jquery click event 감지 console.log("부모 div"); });
$("#child").on("click", function(e){
console.log("자식 div");
e.stopImmediatePropagation();
});
**참조
https://programmingsummaries.tistory.com/313
https://javappo.tistory.com/206
https://frontsom.tistory.com/12
