cancelBubble
현재 이벤트가 이벤트 개층 구조에 따라 상위 개체로 흐르게 될 지를 지정하거나 알아내는 속성이다.
event.cancelBubble [= boolean]
false : 개층구조상 다음 이벤트 핸들러가 이벤트를 받는 것을 허용 ==>> 기본값
true : 개층구조상 다음 이벤트 핸들러가 이벤트를 받는 것을 막는다.
<html>
<head>
<title> cancelBubble </title>
<script language="javascript">
function test(){
alert("2");
}
function fnChk(){
alert("1");
window.event.cancelBubble = false; //cancelBubble의 default값은 false
}
</script>
</head>
<body>
<table border="1">
<tr onClick="test();">
<td><input type="button" name="btChk" value="BT" onClick="fnChk();"></td>
<td><input type="checkbox" name="cbChk">체크</td>
<td>이곳을 눌러보세요</td>
</tr>
</table>
</body>
</html>
[cancelBubble = false]
1. 'BT'버튼을 누르면 처음의 fnChk()가 실행되기 때문에 alert창에 '1'의 내용이 출력된다.
그 다음라인에서 cancelBubble = false이기 때문에 상위의 test()가 실행된다.
즉, fhChk(); => test(); 순으로 호출된다.
2. 체크박스의 경우는 해당 이벤트가 없기 때문에 상위의 test();가 호출
3. '이곳을 눌러보세요'의 경우도 체크박스의 경우와 마찬가지로 자체 이벤트가 없기 때문에 상위의 test();가 호출
[cancelBubble = true]
1. 'BT'버튼을 누르면 fnChk();가 실행되면서 alert창에 '1'의 내용을 띄운 후 cancelBubble = true;로 설정하기 때문에 상위의 핸들러가 이벤트를 받지 못한다.
즉, fnChk();만 실행하고 test();는 실행하지 않는다.
2. 체크박스와 '이곳을 눌러보세요'의 경우는 자체 이벤트가 없기 때문에 상위의 test();를 호출
'프로그램 > Html & Js & Css' 카테고리의 다른 글
| [JS] - 자바스크립트에서 많이 사용하는 Date 객체 (0) | 2009.04.02 |
|---|---|
| [JS] - 자바스크립트에서 많이 사용하는 Array (0) | 2009.04.02 |
| checkbox에서 체크된 항목의 value 알아내기 (0) | 2009.03.31 |
| [펌] - 자바스크립트 강좌, 사용법, 객체, 이벤트 등 (0) | 2009.03.30 |
| [펌] - 유용한 서브메뉴_02 (IE/파폭 지원) (0) | 2009.03.30 |