부트스트랩 모달 창을 테이블의 tr에 적용 하고 tr안에 다른 이벤트를 적용한 button을 생성 했을때 button을 클릭했는데 모달까지 띄워지는 현상이 있어서 해당 에러를 고치기 위해 bubbling과 capturing에 대해 알아 보게 되었다.
javascript 이벤트 - 버블링(bubbling)이란?
P
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>가장 안쪽의 <p>를 클릭하면 p -> div -> form 순서로 3개의 알럿 창이 뜬다.
이런 흐름을 '이벤트 버블링' 이라고 한다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소로 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문.
event.target
이벤트가 발생한 요소에 접근 하려면 event.target으로 접근 가능하다.
event.stopPropagation()
핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단시킨다.
⛔️ 꼭 필요한 경우를 제외하곤 버블링을 막지 말것!
사람들이 페이지에서 어디에서 어디로 클릭 했는지 행동 분석을 하기 위해 document.addEventListener('click'…) 을 사용하게 되는데 stopPropagation으로 버블링을 막아 놓게 되면 사용한 영역은 '죽은 영역(dead zone)'이 되어버린다.
해서, 커스텀 이벤트 등을 사용 해 이벤트 버블링을 통제 할 수 있다.
javascript 이벤트 - 캡쳐링(capturing)이란?
이벤트가 하위 요소로 전파되는 단계이다. 거의 쓰이지는 않는다. 보통 이벤트가 할당되면 가장 가까운 요소에(해당 요소 핸들러)에서 충분히 컨트롤 할 수 있기 때문인다.
캡처링 이벤트를 잡아내려면 addEventListener의 capture 옵션을 true로 설정 해야한다.
elem.addEventListener(..., {capture: true})
elem.addEventListener(..., true)일단 에러는 다음과 같이 해결 하였다.
<script>
//table tr을 클릭 하면 모달창 show
$('#table').on('click', 'tbody tr', function (e) {
$('#modalXl').modal('show');
})
//table tr 안에 button modal event 막는 스크립트
$('#table').on('click', 'tbody tr button', function (e) {
e.stopPropagation();
})
</script>직접 타겟을 tr에 주지 않은 이유는 datatable 라이브러리로 인해 직접적으로 tr을 클릭을 했을 때 이벤트 스크립트 구현을 하려니까 작동이 되지 않았다.(라이브러리로 인해 table 위로 감싸는 div가 많이 생겨서인가 했는데 table 클릭은 제대로 감지한다...이유 아시는분 댓글 부탁드립니다..)
커스텀 이벤트를 이용해 통제하는 방법은 다음 시간에 공부해서 코드를 고칠 수 있으면 고쳐 보도록 하겠다...
