javascript event 전달 막기
이벤트 전달이란?
쉽게 말하면 중첩된 태그의 안쪽 엘리먼트를 클릭하면 그것을 감싸고 있는 태그에 걸린 이벤트까지도 동작하는 것이다.
설명이 좀 와닿지 않으면 다음을 보자.
div태그 3개가 겹쳐 있다.
각 div에는 click에 반응하여 alert을 호출하는 함수가 등록되어 있다.
이 경우 가장 안쪽 div를 클릭하면 어떻게 될까?
정답 : 안쪽 div에 걸린 이벤트부터 시작해서 바깥쪽까지 순서대로 alert함수가 호출된다.
그럼 이벤트 전달이 뭔지는 알았으니 이벤트 전달을 막는 방법을 살펴보자.
익스플로러 : 이벤트 핸들러의 parameter의 속성인 cancelBubble을 true로 바꿔주면 된다.
크롬 등 : 이벤트 핸들러의 parameter의 메서드인 stopPropagation()을 호출해 주면 된다.
-> 실제 테스트 해보니까 브라우저 버전이 높아서 그런지 두가지 방법이 익스플로러와 크롬에 모두 적용되는 것을 확인할 수 있었다.
##### 테스트 코드 #####
<html>
<head>
<style>
div{
border:3px;
border:black;
border-style:solid;
padding:5px;
}
</style>
<script>
window.onload = function(){
document.getElementById('one').onclick = function(e){
alert('one');
e.cancelBubble = true;
//e.stopPropagation();
};
document.getElementById('two').onclick = function(e){
alert('two');
};
document.getElementById('three').onclick = function(e){
alert('three');
};
}
</script>
</head>
<body>
<div id="three">
<div id="two">
<div id="one">
Event Test
</div>
</div>
</div>
</body>
</html>