~\Downloads\Ajax DOM scripting\dom\commCSS.css.html
1
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
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>
댓글