javascript event 전달 막기 Javascript & HTML & CSS/pure javascript2016. 12. 6. 21:48
이벤트 전달이란?
쉽게 말하면 중첩된 태그의 안쪽 엘리먼트를 클릭하면 그것을 감싸고 있는 태그에 걸린 이벤트까지도 동작하는 것이다.
설명이 좀 와닿지 않으면 다음을 보자.
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>
'Javascript & HTML & CSS > pure javascript' 카테고리의 다른 글
| javascript 성능 최적화 및 브라우저 처리 방법 (0) | 2016.12.21 |
|---|---|
| javascript의 유효 범위 (0) | 2016.12.14 |
| javascript 객체지향 연습 - LinkedList 만들기 (0) | 2016.12.05 |
| javascript 객체의 형태 (0) | 2016.12.04 |
| javascript 클로저 (0) | 2016.12.04 |
