티스토리 뷰
자바스크립트 cancelBubble 이벤트 http://snoopy81.tistory.com/124펌
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();를 호출
'IT > JQuery' 카테고리의 다른 글
| [JQuery] ajax 사용 (0) | 2015.08.10 |
|---|---|
| [JQuery] Json객체를 스크립트변수에 담아 사용하기 (0) | 2015.08.10 |
| [JQuery] print 사용시 불필요한 div 안보이게 하기 (0) | 2015.08.04 |
| [JQuery] Tip (0) | 2015.07.09 |
| [JQuery] Tip (0) | 2015.07.08 |