본문 바로가기
DOM Event #JS HTML PHP

~\Downloads\Ajax DOM scripting\dom\commCSS.css.html
 1 /* 공통 CSS */
 2 body{
 3     margin: 0;
 4     padding: 0;
 5     font-size: 16px;
 6     font-family: "굴림", "Times New Roman";
 7 }
 8 h1{
 9     margin-top: 10px;
10     margin-left: 40px;
11     font-size: 18px;
12 }
13 #groupOne {
14     margin-top: 20px;
15     margin-left: 40px;
16 }
17 .idcolor {
18     background-color: yellow;
19 }
~\Downloads\Ajax DOM scripting\dom\chap07\event.js.html
 1 //-----------------------------------------------------
 2 // 이벤트 개요
 3 //-----------------------------------------------------
 4 window.onload = function () {
 5     var qtyClick = document.getElementById('qty');
 6     var priceClick = document.getElementById('price');
 7 
 8     if (qtyClick.addEventListener) {
 9         qtyClick.addEventListener('keyup', Show.qty, false);
10         priceClick.addEventListener('keyup', Show.price, false);
11     } else {
12         qtyClick.attachEvent('onkeyup', Show.qty);
13         priceClick.attachEvent('onkeyup', Show.price);
14     }
15 }
16 var Show = {
17     entryQty: 0,
18     entryPrice: 0,
19     qty: function(event) {
20         var clickElement = event.target || event.srcElement;
21         $('show1').innerHTML = Show.entryQty = clickElement.value;
22     Show.amount();
23     },
24     price: function(event) {
25         var clickElement = event.target || event.srcElement;
26         $('show2').innerHTML = Show.entryPrice = clickElement.value;
27     Show.amount();
28     },
29     amount: function() {
30         $('show3').innerHTML = '금액: ' + Show.entryQty * Show.entryPrice;
31     }
32 }
~\Downloads\Ajax DOM scripting\dom\chap07\event.html.html
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5   <title>이벤트</title>
 6   <link rel="stylesheet" href="../commCSS.css" type="text/css" />
 7   <script language="javascript" type="text/javascript" src="../prototype_160.js"></script>
 8   <script language="javascript" type="text/javascript" src="event.js"></script>
 9 </head>
10 <body>
11 <h1>이벤트 발생</h1>
12 <div id="groupOne">
13     수량: <input type="text" id="qty" />
14     단가: <input type="text" id="price" />
15 
16     <br /><br />
17     <div id="showArea">
18         <div id="show1"></div><br />
19         <div id="show2"></div><br />
20         <div id="show3"></div>
21     </div>
22 </div>
23 </body>
24 </html>

댓글