반응형
소스는 DOM 객체가 실시간으로 event 를 어떻게 제어하는지 보여준다.
기본은 table id 가 t-daddy 인 곳에 클릭하게 되면 메세지를 보여주도록 onclick 이벤트에
alert 를 넣었다. 이것은 t-daddy 어느곳을 클릭하게 되어도 alert 메시지가 뜬다는 소리이다.
이것을 페이지의 onload 이벤트가 발생할때 t-daddy 설정값을 DOM 객체로 바꾼것이다.
그 내용은 테이블내에 tbll 이라는 id 를 가진 tr 태그를 클릭하게 되면
load 함수에서 셋팅한 stopEvent 함수가 실행되게 된다.
이함수의 내용은 t-daddy 테이블내에 c2 id를가진 td 태그속에든 문자를
hellow 로 바꾸고 alert 메시지를 띄우게 된다.
onload 가 실행되면서 초반에 설정된 event 메시지 함수를 stopEvent 로 바꾼것이다
이것은 explorer 에서 잘안되 Firefox 에서 테스트 한것이다.
기본은 table id 가 t-daddy 인 곳에 클릭하게 되면 메세지를 보여주도록 onclick 이벤트에
alert 를 넣었다. 이것은 t-daddy 어느곳을 클릭하게 되어도 alert 메시지가 뜬다는 소리이다.
이것을 페이지의 onload 이벤트가 발생할때 t-daddy 설정값을 DOM 객체로 바꾼것이다.
그 내용은 테이블내에 tbll 이라는 id 를 가진 tr 태그를 클릭하게 되면
load 함수에서 셋팅한 stopEvent 함수가 실행되게 된다.
이함수의 내용은 t-daddy 테이블내에 c2 id를가진 td 태그속에든 문자를
hellow 로 바꾸고 alert 메시지를 띄우게 된다.
onload 가 실행되면서 초반에 설정된 event 메시지 함수를 stopEvent 로 바꾼것이다
이것은 explorer 에서 잘안되 Firefox 에서 테스트 한것이다.
<html>
<head>
<title>Event Propagation</title>
<style type="text/css">
#t-daddy { border: 1px solid red }
#c1 { background-color: pink; }
</style>
<script type="text/javascript">
function stopEvent(ev) {
c2 = document.getElementById("c2");
c2.innerHTML = "hello";
// this ought to keep t-daddy from getting the click.
ev.stopPropagation();
alert("event propagation halted.");
}
function load() {
elem = document.getElementById("tbl1");
elem.addEventListener("click", stopEvent, false);
}
</script>
</head>
<body onload="load();">
<table id="t-daddy" onclick="alert('hi');">
<tr id="tbl1">
<td id="c1">one</td>
</tr>
<tr>
<td id="c2">two</td>
</tr>
</table>
</body>
</html>
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| javascript 에서 문자열 구성할때 태그에 쓰는 "(쌍따움표) 표시하고 싶을때 (1) | 2009.05.17 |
|---|---|
| ajax 를 편리하게 사용할수 있는 prototype framwork 간단한 예제 (0) | 2009.03.30 |
| Ajax 란 무엇이며 순수 Ajax 함수로 간단한 구현예제 정리 (1) | 2009.03.30 |
| DOM 예제 : DOM 이벤트 객체의 속성정보를 모두 보여준다 (0) | 2009.02.28 |
| DOM 예제 : 페이지에 로딩된 모든 stylesheet 정보를 접근해서 변경할수있다. (0) | 2009.02.22 |
| DOM 예제 : 특정 태그문의 stylesheets 정보를 변경해본다. (0) | 2009.02.22 |
| DOM 예제 : DOM 을 이용해서 이미지 객체정보를 변경하는 예제 (0) | 2009.02.22 |
| DOM 예제 : 화면에 로딩되는 이미지의 정보를 알아와서 뿌려주는 예제 (0) | 2009.02.22 |
