이벤트 버블링이란 이벤트가 자식부터 부모까지 계속 실행되는 것을 말한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
}
</script>
<style>
* {border: 3px solid black;}
</style>
</head>
<body>
<div onclick="alert('outer-div')">
<div onclick="alert('inner-div')">
<h1 onclick="alert('header')">
<p onclick="alert('pagagraph')">Pagagraph</p>
</h1>
</div>
</div>
</body>
</html>
위와 같은 소스의 경우 pagagraph 다음 header 다음 inner-div 다음 outer-div 순으로 실행이 될 것이다.
만약 이벤트 버블링을 막고 싶다면?
다음과 같이
인터넷 익스플로러 : 이벤트 객체의 cancelBubble 속성을 true로 바꿈
그 외 브라우저 : 이벤트 객체의 stopPropagation() 메서드를 사용
으로 막습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
window.onload = function(){
document.getElementById('header').onclick = function(){
alert('header');
};
document.getElementById('paragraph').onclick = function(e){
//이벤트 객체를 처리합니다.
var event = e || window.event;
//이벤트 발생을 알립니다.
alert('paragraph');
//이벤트 전달을 제거합니다.
event.cancelBubble = true;
if(event.stopPropagation){
event.stopPropagation();
}
}
}
</script>
</head>
<body>
<h1 id="header">
<p id="paragraph">Paragraph</p>
</h1>
</body>
</html>
이전과 다르게 paragraph만 뜨고 다른 것은 뜨지 않습니다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - 함수 유효범위와 클로저 (0) | 2015.01.22 |
|---|---|
| Javascript - 연산자, 제어문, 예외처리 (0) | 2015.01.21 |
| Javascript - 변수, 데이터 타입, 리터럴 (0) | 2015.01.21 |
| 자바스크립트 - EJS 형식에서 forEach문 의미 및 사용법 (0) | 2015.01.06 |
| 자바스크립트 - for...in 문 (0) | 2015.01.06 |
| 자바스크립트 - DOM level2 이벤트 모델 (0) | 2014.09.09 |
| 자바스크립트 - 문서객체를 이용한 글자 움직이기 예제 (0) | 2014.09.06 |
| 자바스크립트 - 문서객체(DOM)을 사용한 움직임 구현 (0) | 2014.09.06 |