메인메뉴 바로가기

HOME으로 가기

기본문법 [기초] 4.이벤트핸들러

페이지 정보

profile_image
작성자 너갱이
댓글 0건 조회 4,102회 작성일 15-05-15 17:54

본문

4. 이벤트핸들러

 
이벤트(event)란 방문자가 마우스를 움직이거나 클릭하거나, 혹은 키보드를 누른다든지 등의 행동을 하는 것을 말합니다.
자바스크립트에서는 이렇게 사용자가 특정한 행동을 했을 때 어떤 반응을 보여줄 수 있는 함수를 만들 수 있는데 이러한 함수를 이벤트 핸들러 (Event Handler) 라고 합니다.
 
event1.html
 
1 <HTML>
2 <HEAD>
3 <META http-equiv="content-type" content="text/html; charset=euc-kr">
4 <TITLE> Sample Javascript </TITLE>
5 </HEAD>
6 <BODY>
7 <input type="button" onclick="alert('버튼을 클릭하였습니다')" value="클릭 하세요">
8 </BODY>
9 </HTML>
 
7번째 라인에 들어 있는 자바스크립트는 모양이 좀 다르죠? 이제까지의 <script>~</script> 태그는 보이지 않습니다. 이벤트 핸들러는 이렇게 스크립트 태그 없이 쓰여지기도 합니다. 하지만 이것도 역시 엄연한 자바스크립트입니다.
 
 
event2.html
 
1 <HTML>
2 <HEAD>
3 <META http-equiv="content-type" content="text/html; charset=euc-kr">
4 <TITLE> Sample Javascript </TITLE>
5 </HEAD>
6 <BODY>
7 <input type="button" onclick="document.bgColor = 'gold'" value="클릭 하세요">
8 </BODY>
9 </HTML>
 
이번 예문에서는 document.bgColor 라는 구문이 나왔습니다. document.bgColor 는 window 객체의 하위 객체인 document 라는 객체의 배경색을 나타내는 속성입니다. 즉, 버튼(객체)을 클릭하면 문서(document 객체)의 배경색(bgColor 속성)을 gold 색으로 바꾸어 줍니다.
 
 
event3.html
 
1 <HTML>
2 <HEAD>
3 <META http-equiv="content-type" content="text/html; charset=euc-kr">
4 <TITLE> Sample Javascript </TITLE>
5 </HEAD>
6 <BODY onload="alert('문서가 로딩되면 이 창이 뜹니다')">
7 </BODY>
8 </HTML>
 
 
<BODY>본문의 로딩이 완료되면 alert() 함수가 작동하게 됩니다.
 
 
자주 사용되는 이벤트 핸들러의 종류

이벤트설 명
onblur입력양식에서 포커스가 다른 곳으로 이동 했을 때
onclick입력양식에서 링크를 마우스로 클릭했을때
onfocus입력양식 필드로 포커스가 들어 왔을때
onload브라우저에서 문서가 읽혀졌을때
onmouseover링크위로 마우스가 지나갔을 때
onselect입력양식의 한 필드를 선택했을 때
onsubmit입력양식을 서버로 보낼 때
onunload브라우저에서 문서가 없어졌을때
onabort이미지를 읽다가 중단 시켰을때
onerror문서나 이미지를 읽다가 에러가 발생했을때
onmouseout마우스가 링크나 특정영역안에 있다가 나갔을 때
onreset입력양식에서 리셋 시켰을 때
ondbclick마우스를 더블클릭 했을 때
ondragdrop마우스를 클릭한 상태에서 움직였을 때
onkeydown키를 입력했을 때
onkeypress키를 눌렀을 때
onkeyup키를 눌렀다 놓았을 때
onmousedown마우스 버튼을 눌렀을 때
onmousemove마우스를 움직였을 때
onmouseup마우스를 눌렀다 놓았을 때
onmove윈도우나 프레임을 움직였을 때
onresize윈도우나 프레임의 크기를 변경했을 때

 

댓글목록

등록된 댓글이 없습니다.