본문 바로가기

Programming/HTML, CSS, Javascript

[prototype.js] 이벤트 핸들러 적용

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>애플리케이션 실행환경</title>
    <script language="javascript" type="text/javascript" src="./prototype.js"> </script>
    <script language="javascript">
    window.onload = function () {
        var clickElement = document.getElementById('okClick');
        if (clickElement.addEventListener) {
            clickElement.addEventListener('click', Show.okClick, false);   //Explorer가 아닌경우
        } else {
            clickElement.attachEvent('onclick', Show.okClick);   //Explorer인 경우
        }
    }
   
    var Show = {
        okClick: function(event) {
            var showElement = document.getElementById('show');
            showElement.innerHTML="<b>클릭 이벤트가 발생했습니다.</b>";
        }
    }  
    </script>
</head>

<body>
<h1>Document 인터페이스</h1>
<input type="button" id="okClick" value="Document" />

<pre id="appl">애플리케이션 실행환경</pre>

<br />
<div id="showArea">
    <div id="show"></div><br />
</div>

</body>
</html>