이벤트의 순차적 발생? 이벤트 버블링~

이벤트와 관련한 작업을 하다보면 예기치 못한 문제가 종종 발생한다.
이번에는 이벤트가 서브에서 상위로 순차적으로 발생하는 문제(이벤트 버블링)를 만나고
이를 처리하였다.

 

지난번 포스팅한 글 "object is not a function 에러 발생!!" 의 예제를 가지고
살펴보겠다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

 

그룹1
 

  
맴버1
  
맴버2
  
맴버3
 
 
그룹2
 

  
맴버4
  
맴버5
  
맴버6
 
 
 

 

일단 구조는 지난번과 같다. 그룹1과 그룹2를 클릭하면 하단의 맴버 목록이 숨김/표시를 반복하는것이다.
여기에 하나를 추가하자. 위 소스를 보면 지난번 포스팅과 다르게
"<a href='javascript:void(0);' onClick='subclick(); return false'>"란 코드가 들어가 있다.
즉, 그룹을 클릭하면 토글 시키고 맴버를 클릭하면 다른 동작을 하게 하는 것이다.
추가한  A 태그내에 href속성에 과 onclick 이벤트에 주어진 void(0), return false 등을 쓴 이유는
"A 태그에서 onClick 이벤트 사용"에 설명해놓았다.

이제 코드를 붙여보자.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)

 

 

역시 지난번 코드에서 subclick() 함수만 추가하였다.
이제 이를 실행해보면 다음 그림과 같이 된다.

 

 

 

 

 

 

 

그런데 이때 문제가 발생한다.
맴버를 클릭하고 alert창을 닫으면 마치 그룹을 클릭한것처럼 맴버목록이 숨겨진다.
이는 클릭이벤트가 맴버에서 그룹까지 전해진것인데 이를 이벤트 버블링이라고 한다.

지금 상황에서 이는 내가 원하지 않는 동작이다.

그럼 이를 어떻게 처리할까? 버블링을 막는 것이다.

 

첫번째 방법은 subclick() 함수내에서 처리하는것으로
event.cancelBubble = "true"; 를 삽입한다.

두번째 방법은 jquery로 페이지가 onload일때 다음 코드로 처리하는 방법이다.
$(".group a").click(function(e) {
 e.stopPropagation();
});
 
두가지 모두 테스트 해보았고 정상적으로 동작하였다.

최종적인 소스는 아래와 같다.

(코드는 Syntax Highlighter가 적용되어 모바일에서는 안보일 수 있습니다.)