Please Enable JavaScript!
Gon[ Enable JavaScript ]

DOM 예제 : click event 를 DOM 객체로 제어한다.

웹 프로그래밍/자바스크립트
반응형
소스는 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 에서 테스트 한것이다.
<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>

반응형
Posted by 녹두장군1
,