명품웹프로그래밍 1
2 강의목표 1. 이벤트가무엇이고언제발생하는지안다. 2. 자바스크립트코드로이벤트리스너를작성할수있다. 3. 발생하는이벤트가 DOM 트리를따라흘러가는경로를안다. 4. 문서와이미지의로딩완료시호출되는 onload 리스너를작성할수있다. 5. 폼에발생하는이벤트리스너를다룰수있다. 6. 마우스관련이벤트를다룰수있다. 7. 키관련이벤트를다룰수있다.
이벤트개요 3 이벤트 마우스클릭, 키보드입력, 이미지나 HTML 문서의로딩, 타이머의타임아웃등사용자의입력행위나문서나브라우저의상태변화를자바스크립트코드에게알리는통지 (notification) 이벤트리스너 발생한이벤트에대처하기위해작성된자바스크립트코드 이벤트종류 HTML5 에서이벤트종류는 70 여가지 이벤트리스너이름은이벤트이름앞에 on 을덧붙임 예 ) onmousedown : mousedown 이벤트의리스너 onkeydown : keydown 이벤트의리스너
브라우저에발생하는다양한이벤트들 4 load 이벤트 (HTML 문서전체로딩완료시 ) dblclick 이벤트 ( 마우스더블클릭시 ) load 이벤트 ( 이미지의로딩완료시 ) change 이벤트 ( 라디오버튼선택시 ) resize 이벤트 ( 윈도우크기변경시 ) click 이벤트 ( 마우스클릭시 ) submit 이벤트 (submit 버튼클릭시 ) reset 이벤트 (reset 버튼클릭시 ) keypress 이벤트 ( 키를누를때 ) keyup 이벤트 ( 누른키를놓을때 )
이벤트리스너만들기 5 3 가지방법 HTML 태그내에작성 DOM 객체의이벤트리스너프로퍼티에작성 DOM 객체의 addeventlistener() 메소드이용 HTML 태그내에이벤트리스너작성 HTML 태그의이벤트리스너속성에리스너코드직접작성 예 ) <p> 태그에마우스올리면 orchid, 내리면흰색으로배경변경 <p onmouseover="this.style.backgroundcolor='orchid'" onmouseout="this.style.backgroundcolor='white'"> 마우스올리면 orchid 색으로변경 </p>
예제 9-1 HTML 태그내에이벤트리스너작성 6 <!DOCTYPE html> <html> <head><title>html 태그에리스너작성 </title> </head> <body> <p>html 태그에리스너작성 </p> <hr> <p onmouseover="this.style.backgroundcolor='orchid'" onmouseout="this.style.backgroundcolor='white'"> 마우스올리면 orchid 색으로변경 </p> </body> </html> 이곳에마우스를올리면배경색변함
DOM 객체의이벤트리스너프로퍼티에작성 7 DOM 객체의이벤트리스너프로퍼티에이벤트리스너코드작성 예 ) <p id= p > 마우스올리면 orchid 색으로변경 </p> function over() { // onmouseover 리스너로사용할함수... var p = document.getelementbyid("p"); p.onmouseover = over; // onmouseover 리스너로 over() 함수등록 p.onmouseover = over(); // 잘못된코드
8 예제 9-2 DOM 객체의이벤트리스너프로퍼티에리스너등록 <!DOCTYPE html> <html> <head> <title>dom 객체의이벤트리스너프로퍼티에함수등록 </title> <script> var p; function init() { // 문서가완전히로드되었을때호출 p = document.getelementbyid("p"); p.onmouseover = over; // over() 를 onmouseover 리스너로등록 p.onmouseout = out; // out() 를 onmouseout 리스너로등록 function over() { p.style.backgroundcolor="orchid"; function out() { p.style.backgroundcolor="white"; </script> </head> <body onload="init()"> <h3>dom 객체의이벤트리스너프로퍼티에함수등록 </h3> <hr> <p id="p"> 마우스올리면 orchid 색으로변경 </p> </body> </html> 이곳에마우스를올리면배경색변함
DOM 객체의 addeventlistener() 메소드활용 9 addeventlistener() 메소드 예 ) p.addeventlistener("mouseover", over); // onmouseover 리스너로 over() 등록
예제 9 3 addeventlistener() 사용 10 <!DOCTYPE html> <html> <head> <title>addeventlistener() 를이용한리스너등록 </title> <script> var p; function init() { // 문서가완전히로드되었을때호출 p = document.getelementbyid("p"); p.addeventlistener("mouseover", over); // 이벤트리스너등록 p.addeventlistener("mouseout", out); // 이벤트리스너등록 function over() { p.style.backgroundcolor="orchid"; function out() { p.style.backgroundcolor="white"; </script> </head> <body onload="init()"> <h3>addeventlistener() 를이용한리스너등록 </h3> <hr> <p id="p"> 마우스올리면 orchid 색으로변경 </p> </body> </html> 이곳에마우스를올리면배경색변함
익명함수로이벤트리스너작성 11 익명함수 (anonymous function) 함수이름없이필요한곳에함수의코드를바로작성 예 ) p.onmouseover = function () { this.style.backgroundcolor = "orchid"; ; // 익명함수 p.addeventlistener("mouseover", function () { this.style.backgroundcolor = "orchid"; // 익명함수 ); 코드가짧거나한곳에서만사용하는경우, 익명함수편리
예제 9-4 익명함수로이벤트리스너작성 12 <!DOCTYPE html> <html> <head> <title> 익명함수로이벤트리스너작성 </title> <script> var p; function init() { // 문서가완전히로드되었을때호출 p = document.getelementbyid("p"); p.onmouseover = function () { // 익명함수 this.style.backgroundcolor = "orchid"; ; p.addeventlistener("mouseout", function () { this.style.backgroundcolor="white"; // 익명함수 ); </script> </head> <body onload="init()"> <h3> 익명함수로이벤트리스너작성 </h3> <hr> <p id="p"> 마우스올리면 orchid 색으로변경 </p> </body> </html> 이곳에마우스를올리면배경색변함
이벤트리스너작성방법 4 가지비교 13 function over() { p.style.backgroundcolor="orchid"; (1) HTML 태그 <p id="p" onmouseover="this.style.backgroundcolor='orchid'" 마우스올리면 orchid 색으로변경 </p> (2) 이벤트리스너프로퍼티 function over() { p.style.backgroundcolor="orchid"; p.onmouseover = over; (3) addeventlistener() 메소드이용 p.addeventlistener("mouseover", over); (4) 익명함수이용 p.onmouseover = function () { this.style.backgroundcolor="orchid"; ; (5) 익명함수이용 p.addeventlistener("mouseover", function () { this.style.backgroundcolor="orchid"; );
이벤트객체 14 이벤트객체 (event object) 발생한이벤트에관련된다양한정보를담은객체 예 ) mousedown 이벤트의경우, 마우스좌표와버튼번호등 keydown 이벤트의경우, 키코드값등 이벤트가처리되고나면이벤트객체소멸 이벤트리스너자바스크립트코드 mousedown 이벤트발생 마우스클릭좌표, 버튼번호, 휠이구른값 이벤트객체
이벤트객체전달받기 15 이벤트객체는이벤트리스너함수의첫번째매개변수에전달 1. 이름을가진이벤트리스너 function f(e) { // 매개변수 e 에이벤트객체전달받음... obj.onclick = f; // obj 객체의 onclick 리스너로함수 f 등록 Onclick 하면이객체수행 2. 익명함수의경우 obj.onclick = function(e) { // 매개변수 e 에이벤트객체전달받음... 3. HTML 태그에이벤트리스너 : event 라는이름으로전달 function f(e) {... event 라는이름으로이벤트객체전달받음... <button onclick= f(event) > 버튼 </button> <div onclick= alert(event.type) > 버튼 </div>
16 예제 9-5 이벤트리스너에서이벤트객체전달받기 <!DOCTYPE html> <html> <head> <title> 이벤트객체전달받기 </title> </head> <body> <p id="p"> 마우스를올려보세요 </p> <button onclick="f(event)"> 클릭하세요 </button> <script> function f(e) { // e 는현재발생한이벤트객체 alert(e.type); // 이벤트종류출력 텍스트위아무곳이나마우스를올릴때 document.getelementbyid("p").onmouseover = f; </script> </body> </html>
이벤트객체에들어있는정보 17 이벤트객체에들어있는정보 현재발생한이벤트에관한다양한정보 이벤트객체의프로퍼티와메소드로알수있음 이벤트의종류마다조금씩다름 이벤트객체의공통멤버 target 프로퍼티 이벤트타겟객체가리킴 이벤트타겟 : 이벤트를유발시킨 DOM 객체 <button> 태그의버튼을클릭하였으면, 이때 click 이벤트의이벤트타겟은버튼
예제 9-6 이벤트객체의프로퍼티출력 18 <!DOCTYPE html> <html> <head><title> 이벤트객체프로퍼티 </title> </head> <body> <h3> 이벤트객체의프로퍼티출력 </h3> <hr> <p id="p"> 버튼을클릭하면이벤트객체를출력합니다.</p> <button onclick="f(event)"> 클릭하세요 </button> <script> function f(e) { // e 는현재발생한이벤트객체 var text = "type: " + e.type + "<br>" + "target: " + e.target + "<br>" + "currenttarget: " + e.currenttarget + "<br>" + "defaultprevented: " + e.defaultprevented; var p = document.getelementbyid("p"); p.innerhtml = text; // 이벤트객체의프로퍼티출력 </script> </body> </html> 버튼을클릭하면 click 이벤트객체의프로퍼티출력
이벤트의디폴트행동취소, preventdefault() 19 이벤트의디폴트행동이란? 특정이벤트에대한 HTML 태그의기본행동사례 <a> 의 click 이벤트의디폴트행동 : 웹페이지이동 Submit 버튼의 click 이벤트의디폴트행동 : 폼데이터전송 <input type= checkbox > 의 click 이벤트의디폴트행동 : 체크박스선택 이벤트의디폴트행동을막는방법 1. 이벤트리스너에서 false 리턴 <a href="http://www.naver.com" onclick="return false"> 이동안되는링크 </a> 2. 이벤트객체의 preventdefault() 메소드호출 <a href="http://www.naver.com" onclick="event.preventdefault();"> 이동안되는링크 </a> 이벤트객체의 cancelable 프로퍼티가 true 인경우만취소가능
예제 9-7 이벤트의디폴트행동취소 20 <!DOCTYPE html> <html><head><title> 이벤트의디폴트행동취소 </title> <script> function query() { var ret = confirm(" 네이버로이동하시겠습니까?"); return ret; // confirm() 의리턴값은 true 또는 false function noaction(e) { e.preventdefault(); // 이벤트의디폴트행동강제취소 </script> </head> <body> <h3> 이벤트의디폴트행동취소 </h3> <hr> <a href="http://www.naver.com" onclick="return query()"> 네이버로이동할지물어보는링크 </a> <hr> <form> <input type="checkbox"> 빵 ( 체크됨 )<br> <input type="checkbox" onclick="noaction(event)"> 술 ( 체크안됨 ) </form> </body> </html> 취소버튼을누르면네이버로이동하지않음
이벤트흐름 21 이벤트흐름이란? 이벤트가발생하면 window 객체에먼저도달하고, DOM 트리를따라이벤트타겟에도착하고, 다시반대방향으로흘러 window 객체에도달한다음사라지는과정 이벤트가흘러가는과정 캡쳐단계 (capturing phase) 이벤트가 window 객체에서중간의모든 DOM 객체를거쳐타겟객체에전달되는과정 이벤트가거쳐가는모든 DOM 객체 (window 포함 ) 의이벤트리스너실행 버블단계 (bubbling phase) 이벤트가타겟에서중간의모든 DOM 객체를거쳐 window 객체에전달되는과정 이벤트가거쳐가는모든 DOM 객체 (window 포함 ) 의이벤트리스너실행 DOM 객체에는캡쳐리스너와버블리스너두개모두작성할수있음
이벤트흐름사례 22 샘플웹페이지 <!DOCTYPE html> <html><head><title>html DOM 트리 </title></head> <body> <p style="color:blue" > 이것은 <span style="color:red"> 문장입니다.</span> </p> <form> <input type="text"> <input type="button" value=" 테스트 " id="button"> <hr> </form> </body></html> 버튼클릭, click 이벤트발생
버튼클릭으로 input 객체에 click 이벤트발생 1 window 12 click 이벤트소멸 2 document 11 이벤트캡쳐단계 (event capture) 3 html 10 이벤트버블단계 (event bubble) head 4 body 9 title p 5 form 8 6 7 span input input hr 23 이벤트타겟
캡쳐리스너와버블리스너 24 DOM 객체의이벤트리스너 캡쳐리스너와버블리스너를모두소유가능 이벤트리스너등록시, 캡쳐리스너인지버블리스너인지구분 캡쳐리스너와버블리스너등록 addeventlistener() 의 3 번째매개변수이용 true 이면캡쳐리스너, false 이면버블리스너 var b = document.getelementbyid("button"); b.addeventlistener("click", capfunc, true); // 캡쳐단계에서 capfunc() 실행 b.addeventlistener("click", bubblefunc, false); // 버블단계에서 bubblefunc() 실행 다른방법의이벤트리스너등록의경우 버블리스너로자동등록 예 ) obj.onclick = function(e) { // 버블리스너도작동...
예제 9-8 이벤트흐름 25 <!DOCTYPE html> <html><head><title> 이벤트흐름 </title></head> <body> <p style="color:blue"> 이것은 <span style="color:red" id="span"> 문장입니다. </span> </p> <form> <input type="text" name="s"> <input type="button" value=" 테스트 " id="button"> <hr> </form> <div id="div" style="color:green"></div> <script> var div = document.getelementbyid("div"); // 이벤트메시지출력공간 var button = document.getelementbyid("button"); // body 객체에캡쳐리스너등록 document.body.addeventlistener("click", capture, true); // 켭쳐단계 (1) // 타겟객체에버블리스너등록 button.addeventlistener("click", bubble, false); // 버블단계 (2) // body 객체에버블리스너등록 document.body.addeventlistener("click", bubble, false); // 버블단계 (3) function capture(e) { // e 는이벤트객체 var obj = e.currenttarget; // 현재이벤트를받은 DOM 객체 var tagname = obj.tagname; // 태그이름 div.innerhtml += "<br>capture 단계 : " + tagname + " 태그 " + e.type + " 이벤트 "; 버튼을클릭하면 click 이벤트발생 function bubble(e) { // e 는이벤트객체 var obj = e.currenttarget; // 현재이벤트를받은 DOM 객체 var tagname = obj.tagname; // 태그이름 div.innerhtml += "<br>bubble 단계 : " + tagname + " 태그 " + e.type + " 이벤트 "; </script> </body></html>
버튼클릭으로 input 객체에 click 이벤트발생 window click 이벤트소멸 예제 9-8 웹페이지의이벤트리스너실행 1. <body> 태그의캡처리스너실행 2. <input> 태그의버블리스너실행 3. <body> 태그의버블리스너실행 document html head 캡쳐리스너 capture() {.. 1 body 3 bubble() {.. 버블리스너 title p form 26 span input input hr 2 bubble() {.. 버블리스너
이벤트흐름을중단시킬수있는가? YES 27 이벤트객체의 stoppropagation() 호출 event.stoppropagation(); // event 가이벤트객체일때
마우스핸들링 28 마우스이벤트객체의프로퍼티 onclick HTML 태그가클릭될때 ondblclick HTML 태그가더블클릭될때
예제 9-9 onclick 리스너로계산기만들기 29 <!DOCTYPE html> <html><head><title>onclick</title> <script> function calculate() { var exp = document.getelementbyid("exp"); var result = document.getelementbyid("result"); result.value = eval(exp.value); </script> </head> <body > <h3> onclick, 계산기만들기 </h3> <hr> 계산하고자하는수식을입력하고계산버튼을눌러봐요. <p> <form> 식 <input type="text" id="exp" value=""><br> 값 <input type="text" id ="result"> <input type="button" value=" 계산 " onclick="calculate()"> </form> </body> </html>
여러마우스관련이벤트리스너 30 마우스관련이벤트리스너호출경우 onmousedown : 마우스버튼을누르는순간 onmouseup : 눌러진버튼이놓여지는순간 onmouseover : 마우스가태그위로올라오는순간. 자식영역포함 onmouseout : 마우스가태그위로올라오는순간. 자식영역포함 onmouseenter : 마우스가태그위로올라오는순간. 버블단계없음 onmouseleave : 마우스가태그위로올라오는순간. 버블단계없음 onwheel : HTML 태그에마우스휠이구르는동안계속호출 위쪽으로굴린경우 : wheeldelta 프로퍼티값양수 (120) 아래쪽으로굴린경우 : wheeldelta 프로퍼티값양수 (-120) obj.onwheel = function (e) { if(e.wheeldelta < 0) { // 아래쪽으로휠을굴린경우... else { // 위쪽으로휠을굴린경우... ;
예제 9-10 마우스관련이벤트리스너 31 <!DOCTYPE html> <html><head><title> 마우스관련리스너 </title> <script> var width=1; // 테두리두깨 function down(obj) { obj.style.fontstyle = "italic"; function up(obj) { obj.style.fontstyle = "normal"; function over(obj) { obj.style.bordercolor = "violet"; // 테두리폭이 0 일때색은보이지않는다. function out(obj) { obj.style.bordercolor = "lightgray"; function wheel(e, obj) { // e 는이벤트객체 if(e.wheeldelta < 0) { // 휠을아래로굴릴때 width--; // 폭 1 감소 if(width < 0) width = 0; // 폭이 0 보다작아지지않게 else // 휠을위로굴릴때 width++; // 폭 1 증가 obj.style.borderstyle = "ridge"; obj.style.borderwidth = width+"px"; </script></head> <body > <h3> 마우스관련이벤트리스너 </h3> <hr> <div> 마우스관련 <span onmousedown="down(this)" onmouseup="up(this)" onmouseover="over(this)" onmouseout="out(this)" onwheel="wheel(event, this)"> 이벤트 </span> 가발생합니다. </div> </body> </html>
초기화면 마우스를위로굴릴때두께가 1 식두꺼워진다. (onwheel) 마우스를텍스트위로올릴때 violet 색 (onmouseover) 마우스를눌렀을때 Italic 체 (onmousedown) 마우스를텍스트에서내릴때회색 (onmouseout) 32
예제 9-11 onmousemove 와마우스위치및버튼 33 <!DOCTYPE html> <html><head><title> 마우스이벤트객체의프로퍼티 </title> <style> div { background : skyblue; width : 250px; </style> </head> <body> <h3> 마우스이벤트객체의프로퍼티와 onmousemove</h3> <hr> 이미지위에마우스를움직일때 onmousemove 리스너가실행되고, 마우스의위치를보여줍니다.<p> <img src="images/beach.png" onmousemove="where(event)"><p> <div id="div"></div> <script> var div = document.getelementbyid("div"); function where(e) { var text = " 버튼 =" + e.button + "<br>"; text += "(screenx, screeny)=" + e.screenx + ", + e.screeny + "<br>"; text += "(clientx, clienty)=" + e.clientx + "," + e.clienty + "<br>"; text += "(offsetx, offsety)=" + e.offsetx + "," + e.offsety + "<br>"; text += "(x, y)=" + e.x + "," + e.y + "\n"; div.innerhtml = text; </script> </body> </html> 202 96 (88, 46) 두좌표가같은이유는 <img> 객체의부모가 <body> 로서, 브라우저윈도우이기때문
oncontextmenu 34 HTML 태그위에마우스오른쪽버튼클릭 디폴트로컨텍스트메뉴 (context menu) 출력 소스보기 나 이미지다운로드 등의메뉴 oncontextmenu 리스너가먼저호출 false 를리턴하면컨텍스트메뉴를출력하는디폴트행동취소 document.oncontextmenu = function () {... return false; // 컨텍스트메뉴출력금지
35 예제 9-12 oncontextmenu 로소스보기나이미지다운로드금지 <!DOCTYPE html> <html> <head><title>oncontextmenu</title> <script> function hidemenu() { alert(" 오른쪽클릭 < 컨텍스트메뉴 > 금지 "); return false; document.oncontextmenu=hidemenu; </script> </head> <body> <h3>oncontextmenu 에서컨텍스트메뉴금지 </h3> <hr> 마우스오른쪽클릭은금지됩니다. 아무곳이나클릭해도컨텍스트메뉴를볼수없습니다. </body> </html> 아무곳이나마우스오른쪽클릭
문서의로딩완료와 onload 36 onload window 객체에발생 웹페이지의로딩완료시호출되는이벤트리스너 onload 리스너작성방법 1. window.onload="alert('onload');"; 2. <body onload="alert('onload');"> 이둘은같은표현임. <body> 에 onload 를달인 window 객체에 load 이벤트가전달됨 * document.onload 는최근에와서많은브라우저에서작동하지않음
37 예제 9-13 onload 에서사이트이전을알리는공고창출력 <!DOCTYPE html> <html> <head><title>html 문서의 onload</title> </head> \ 는뒤에 <enter> 키를무시하게만듦 <body onload="alert(' 이사이트는 2017 년 9 월 1 일부터 \ www.js.co.kr 로옮겨지게됩니다.')"> <h3>html 문서의로딩완료, onload</h3> <hr> 이페이지는 onload 리스너의사용예를보여줍니다이페이지가출력되고난바로직후 onload 리스너를통해경고창을출력합니다. </body> </html>
이미지로딩완료와 onload 38 Image 객체 <img> 태그에의해생성되는 DOM 객체 new Image(); 자바스크립트코드에의해생성되는객체 onload 이미지의로딩이완료되면 Image 객체에발생하는이벤트 새로운이미지를로딩하는방법 <img id="myimg" src="apple.png" width="..." height="..."> var myimg = document.getelementbyid("myimg"); myimg.src = banana.png"; banana.png 이미지의로딩이완료된 myimg 의 onload 리스너실행
이미지로딩시주의할점 39 잘못된이미지로딩코드 이미지를로딩하여이미지폭을알아내는코드 문제점 myimg.src = "banana.png"; 실행직후이미지로딩완료되지않음 var width = myimg.width; 이미지로딩완료전이면, myimg.width=0 코드수정 var myimg = document.getelementbyid("myimg"); myimg.src = "banana.png"; var width = myimg.width; // banana.png 이미지의폭 onload 리스너에서이미지폭을알아내는코드작성 var myimg = document.getelementbyid("myimg"); myimg.onload = function () { // 이미지로딩완료시실행 var width = myimg.width; // 정확한이미지폭읽기 myimg.src = banana.png"; // 이미지로딩지시
예제 9-14 onload 로이미지의크기알아내기 40 <!DOCTYPE html> <html> <head><title>onload 로이미지크기출력 </title> <script> function changeimage() { var sel = document.getelementbyid("sel"); var img = document.getelementbyid("myimg"); img.onload = function () { // 이미지크기출력 var myspan = document.getelementbyid("myspan"); myspan.innerhtml = img.width + "x" + img.height; var index= sel.selectedindex; // 선택된옵션인덱스 img.src = sel.options[index].value; // <option> 의 value 속성 </script> </head> <body onload="changeimage()"> <h3>onload 로이미지크기출력 </h3> <hr> <form> <select id="sel" onchange="changeimage()"> <option value="images/apple.png"> 사과 <option value="images/banana.png"> 바나나 <option value="images/mango.png"> 망고 </select> <span id="myspan"> 이미지크기 </span> </form> <p><img id="myimg" src="images/apple.png" alt="."></p> </body> </html> banana.png 의이미지크기
new Image() 로이미지로딩과출력 41 동적으로이미지객체생성 new Image() 이미지객체가생겼지만화면에출력되지않음 new Image() 의이미지객체에이미지로딩 var bananaimg = new Image(); bananaimg.src = "banana.png"; // 이미지객체생성 // 이미지로딩 로딩된이미지출력 <img> 태그에할당된브라우저공간에이미지출력 <img id="myimg" src="apple.png" width="..." height="..."> var myimg = document.getelementbyid("myimg"); myimg.src = bananaimg.src; // 이미지출력
예제 9-15 new Image() 로이미지로딩 42 <!DOCTYPE html> <html><head><title>new Image() 로이미지로딩 </title> <script> // 미리로딩해둘이미지이름배열 var files = ["images/penguins.jpg", "images/lighthouse.jpg", "images/chrysanthemum.jpg", "images/desert.jpg", "images/hydrangeas.jpg", "images/jellyfish.jpg", "images/koala.jpg", "images/tulips.jpg"]; var imgs = new Array(); for(var i=0; i<files.length; i++) { imgs[i] = new Image(); // 이미지객체생성 imgs[i].src = files[i]; // 이미지로딩 // 다음이미지출력 var next = 1; function change(img) { img.src = imgs[next].src; // 이미지변경 next++; // 다음이미지 next %= imgs.length; // 개수를넘으면처음으로 </script></head> <body> <h3>new Image() 로이미지로딩 </h3> <hr> 이미지를클릭하면다음이미지를보여줍니다.<p> <img style="border:20px ridge wheat" src="images/penguins.jpg" alt="." width="200" height="200" onclick="change(this)"> </body></html> 클릭하면다음이미지를보여준다.
onblur 와 onfocus 43 포커스 포커스는현재키입력에대한독점권 브라우저는포커스를가지고있는 HTML 태그요소에키공급 onblur 포커스를잃을때발생하는이벤트리스너 예 ) 다른 HTML 요소를클릭하면, 현재 HTML 요소는포커스를잃는다. onfocus 포커스를잃을때발생하는이벤트리스너 예 ) 현재 HTML 요소를클릭하면, 현재 HTML 요소가포커스를얻는다.
44 예제 9-16 onfocus 와 onblur, 입력없이다른창으로갈수없음 <!DOCTYPE html> <html> <head><title>onfocus 와 onblur</title> <script> function checkfilled(obj) { if(obj.value == "") { alert("enter name!"); obj.focus(); // obj 에다시포커스 </script> </head> <body onload="document.getelementbyid('name').focus();"> <h3>onfocus 와 onblur</h3> <hr> <p> 이름을입력하지않고다른창으로이동할수없습니다.</p> <form> 이름 <input type="text" id="name" onblur="checkfilled(this)"><p> 학번 <input type="text"> </form> </body> </html> 이름을입력하지않은상태에서다른곳을클릭하면아래의경고창출력
라디오버튼과체크박스 45 라디오버튼객체 <input type="radio"> 로만들어진라디오버튼 DOM 객체 <form> <input type="radio" name="city" value="seoul"> 서울 <input type="radio" name="city" value="busan"> 부산 <input type="radio" name="city" value="chunchen"> 춘천 </form> 라디오버튼객체들알아내기 var kcity = document.getelementsbyname("city"); // kcity[0], kcity[1], kcity[2] 체크박스객체 <input type="checkbox"> 로만들어진체크박스 DOM 객체
예제 9-17 선택된라디오버튼알아내기 46 <!DOCTYPE html> <html> <head><title> 선택된라디오버튼알아내기 </title> <script> function findchecked() { var found = null; var kcity = document.getelementsbyname("city"); for(var i=0; i<kcity.length; i++) { if(kcity[i].checked == true) found = kcity[i]; if(found!= null) alert(found.value + " 이선택되었음 "); else alert(" 선택된것이없음 "); </script> </head> <body> <h3> 버튼을클릭하면선택된라디오버튼의 value 를출력합니다.</h3> <hr> <form> <input type="radio" name="city" value="seoul" checked> 서울 <input type="radio" name="city" value="busan"> 부산 <input type="radio" name="city" value="chunchen"> 춘천 <input type="button" value="find checked" onclick="findchecked()"> </form> </body> </html>
예제 9 18 체크박스로선택한물품계산 47 <!DOCTYPE html> <html> <head><title> 선택된물품계산하기 </title> <script> var sum=0; function calc(cbox) { if(cbox.checked) sum += parseint(cbox.value); else sum -= parseint(cbox.value); document.getelementbyid("sumtext").value = sum; </script> </head> <body> <h3> 물품을선택하면금액이자동계산됩니다 </h3> <hr> <form> <input type="checkbox" name="hap" value="10000" onclick="calc(this)"> 모자 1 만원 <input type="checkbox" name="shose" value="30000" onclick="calc(this)"> 구두 3 만원 <input type="checkbox" name="bag" value="80000" onclick="calc(this)"> 명품가방 8 만원 <br> 지불하실금액 <input type="text" id="sumtext" value="0" > </form> </body> </html>
select 객체와 onchange 48 select 객체는 <select> 태그로만들어진콤보박스 option 객체는 <option> 태그로표현되는옵션아이템 <select id="fruits"> <option value="1"> 딸기 </option> <option value="2" selected> 바나나 </option> <option value="3"> 사과 </option> </select> 선택된옵션알아내기 var sel = document.getelementbyid("fruits"); var index = sel.selectedindex; // index는선택상태의옵션인덱스 옵션선택 sel.selectedindex = 2; sel.options[2].selected = true; // 3번째옵션 사과 선택 // 3번째옵션 사과 선택 select 와 onchange 리스너 선택된옵션이변경되면 select 객체의 onchange 리스너호출 <select id="fruits" onchange="drawimage()">...</select>
예제 9-19 select 객체에서선택한과일출력 49 <!DOCTYPE html> <html> <head> <title>select 객체에서선택한과일출력 </title> <script> function drawimage() { var sel = document.getelementbyid("fruits"); var img = document.getelementbyid("fruitimage"); img.src = sel.options[sel.selectedindex].value; </script> </head> <body onload="drawimage()"> <h3>select 객체에서선택한과일출력 </h3> <hr> 과일을선택하면이미지가출력됩니다.<p> <form> <select id="fruits" onchange="drawimage()"> <option value="images/strawberry.png"> 딸기 <option value="images/banana.png" selected> 바나나 <option value="images/apple.png"> 사과 </select> <img id="fruitimage" src="images/banana.gif" alt=""> </form> </body> </html>
키이벤트 50 onkeydown, onkeypress, onkeyup onkeydown 키가눌러지는순간호출. 모든키에대해작동 onkeypress 문자키와 <Enter>, <Space>, <Esc> 키에대해서만눌러지는순간에추가호출 문자키가아닌경우 (<F1>, <Shift>, <PgDn>, <Del>, <Ins> 등 ) 호출되지않음 onkeyup 눌러진키가떼어지는순간호출
51 예제 9-20 키이벤트리스너와이벤트객체의프로퍼티 <!DOCTYPE html> <html><head><title> 키이벤트 </title> <script> function whatkeydown(e) { var str = ""; var div = document.getelementbyid("div"); div.innerhtml = ""; // div 객체내용을지운다. if(e.altkey) { if(e.altleft) str += " 왼쪽 Alt 키가눌러졌습니다 "; else str += " 오른쪽 Alt 키가눌러졌습니다."; str += "<br>"; <body> <h3> 키리스너와키이벤트객체의프로퍼티 </h3> <hr> 텍스트창에키를눌러보세요. Alt, Shift, Ctrl 키도가능합니다.<br> <input type="text" id="text" onkeydown="whatkeydown(event)"> <div id="div" style="background-color:skyblue; width:250px; height:50px"> </div> </body> </html> if(e.shiftkey) { if(e.shiftleft) str += " 왼쪽 Shift 키가눌러졌습니다."; else str += " 오른쪽 Shift 키가눌러졌습니다."; str += "<br>"; if(e.ctrlkey) { if(e.ctrlleft) str += " 왼쪽 Ctrl 키가눌러졌습니다."; else str += " 오른쪽 Ctrl 키가눌러졌습니다 "; str += "<br>"; str += String.fromCharCode(e.keyCode) + " 키가눌려졌습니다." div.innerhtml = str; // div 객체에문자열을출력한다. </script> </head>
onreset 과 onsubmit 52 onreset reset 버튼 (<input type="rest">) 클릭시 false 를리턴하면폼이초기화되지않음 onsubmit submit(<input type="rest">) 버튼클릭시 false 를리턴하면폼전송하지않음 리스너작성 <form onreset="..." onsubmit="...">