5. 이벤트와 이벤트 핸들러

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

안녕, 세상!

5. 이벤트와 이벤트 핸들러 본문

It공부/JavaScript

5. 이벤트와 이벤트 핸들러

dev_Lumin 2020. 7. 27. 12:08

(1) 이벤트와 이벤트 핸들러

이벤트는 웹 문서에서 사용자가 어떠한 행동을 취했을 경우 발생하는 사건 또는 행위를 의미합니다.

이벤트 핸들러는 이와 같은 이벤트를 처리하는 자바스크립트 코드를 말합니다.

이벤트는 이벤트 핸들러에 의해서 수행되며 이벤트 핸들러란 이벤트 발생에 의해서 실행되는 메소드 혹은 이벤트 함수를 말합니다.

자바스크립트에서 웹브라우저의 내장객체들은 계층구조를 이루고 있으며, 이벤트가 발생하면 해당 이벤트 핸들러에 의해서 이벤트를 전달할 때 계층구조를 따라 전달되는 경로로 해당되는 이벤트 핸들러에게 전달됩니다.

window 객체 -> document 객체 -> form 객체 -> input 객체

(상위 객체) (하위 객체)

(2) 이벤트의 종류

이벤트를 처리하는 방법은 스크립트를 이용하는 방법과 스크립트 코드와 연결하여 사용하는 방법이 있으며, 이벤트의 이름은 대/소문자를 구별하지 않습니다.

자바스크립트에서 이벤트 핸들러는 이벤트의 이름 앞에 일반적으로 "on"이라는 접두어를 붙여서 사용합니다.

분류	이벤트 핸드러	설명
마우스	onClick	링크나 폼 양식을 마우스로 클릭할 때 발생하는 이벤트
	onDblClick	마우스를 더블 클릭할 때 발생하는 이벤트
	onDragDrop	마우스를 드래그할 때 발생하는 이벤트
	onMouseDown	사용자가 마우스 버튼을 누르는 순간 발생하는 이벤트
	onMouseMove	마우스가 움직일 때마다 발생하는 이벤트
	onMouseOut	이미지나 링크위에 마우스 커서가 떠날 경우 발생하는 이벤트
	onMouseOver	이미지나 링크위에 마우스 커서가 올라오는 경우 발생하는 이벤트
	onMouseUp	사용자가 마우스를 눌렀다 놓는 순간 발생하는 이벤트
포커스	onBlur	커서를 다른 곳으로 이동할 때 발생하는 이벤트
포커스	onFocus	커서가 위치할 때 발생하는 이벤트
키보드	onKeyDown	사용자가 키를 누르는 순간 발생하는 이벤트
	onKeyPress	사용자가 키를 누른 채 유지하는 동안 발생하는 이벤트
	onKeyUp	사용자가 키를 눌렀다가 놓은 순간 발생하는 이벤트
폼	onChange	입력 폼 양식을 변경할 때 발생하는 이벤트
	onReset	리셋 버튼을 눌렀을 때 발생하는 이벤트
	onSelect	입력 양식의 하나가 선택될 때 발생하는 이벤트
	onSubmit	폼을 전송할 때 발생하는 이벤트
윈도우	onAbort	사용자의 작업을 강제로 중단할 때 발생하는 이벤트
	onError	문서나 이미지에서 에러를 만났을 때 발생하는 이벤트
	onLoad	문서가 브라우저로 읽혀질 때 발생하는 이벤트
	onUnload	문서가 브라우저에서 닫힐 때 발생하는 이벤트
	onMove	윈도우나 프레임을 움직일 때 발생하는 이벤트
	onResize	윈도우나 프레임의 사이즈를 조정할 때 발생하는 이벤트

(3) 이벤트 핸들러 설정 방법

이벤트 핸들러를 설정하는 방법은 두 가지가 있습니다.

(1) HTML 태그의 속성으로 지정하는 방법

형식은 다음과 같습니다.

<TAG eventHandler_name = "Javascript_Code">

TAG는 웹페이지에 사용할 태그를 선택적으로 사용하면 됩니다.

eventHandler_name은 사용할 이벤트 핸들러의 이름을 사용하면 됩니다.

Javascript_Code는 해당 이벤트가 발생 시 나타날 사건관련된 코드를 자바스크립트 코드로 작성하면 됩니다.

여러 개의 문장들이 세미콜론(;)으로 분리하여 작성합니다.

다음은 예제입니다.

1
2
3
4
5
6
7
8
9
10
11

<HTML>
<HEAD><title>sample</title>
</HEAD>
<BODY>
<table border=1>
  <tr onmouseout="style.backgroundColor=''" onmouseover='style.backgroundColor="red"'>
    <td width=100>&nbsp 1행1열</td>
    <td width=100>&nbsp 1행2열</td>
  </tr>
</BODY>
</HTML>
Colored by Color Scripter

cs

테이블에 마우스가 올라가 있으면 위와 같이 테이블의 배경이 red 색상으로 변하고, 마우스를 테이블로부터 치우면 색상이 없어집니다.

(2) 객체의 속성처럼 지정하는 법

형식은 다음과 같습니다.

object_name.eventHandler_name = function_name;

object_name은 객체의 이름입니다.

function_name은 객체에 이벤트가 발생 시, 수행할 함수이름입니다.

다음은 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<HTML>
<HEAD><title>sample</title>
  <script language="javascript">
  function ab(str,color) {
    window.status =str;
    document.bgColor = color;
  }
  </script>
</HEAD>
<BODY>
  <form name="form1">
    <img src="C:///download/iamironman.jpg" width=130 onMouseover="ab('사진위마우스 올라옴', 'red')"
                                                      onMouseout="ab('사진 밖으로 마우스 나감','green')">
  </form>
</BODY>
</HTML>
Colored by Color Scripter

cs

사진 위에 마우스를 올려 넣으면 사진 외의 배경은 색상이 빨간색이 되고 사진 위에 마우스를 올려놓지 않으면 배경은 위와 같이 초록색 색상을 바뀝니다.

(4) 이벤트의 활용

① onClick

onClick은 링크나 폼 양식을 마우스로 클릭할 때 발생하는 이벤트입니다.

다음은 onClick을 이용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<HTML>
<HEAD><title>sample</title>
  <script language="javascript">
  function compute(form){
    var res= eval(form.exp.value); 
    form.val.value= res;
  }
  </script>
</HEAD>
<BODY>
  <form name="cal">
    수식입력: <input type="text" name="exp" value="" size=30> <br>
    연산결과: <input type="text" name="val" value="" size=30> <br>
    <input type="button" value="결과" onClick="compute(this.form)">
  </form>
</BODY>
</HTML>
 
Colored by Color Scripter

cs

② onBlur 이벤트와 onFocus 이벤트

onBlur : 커서를 입력 양식 요소에서 다른 곳으로 이동했을 때 발생하는 이벤트입니다.

onFocus : 입력 양식 필드에서 커서가 위치할 때 발생하는 이벤트입니다.

다음은 onBlur을 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<HTML>
<HEAD><title>sample</title>
  <script language="javascript">
function searchNum(text,num){
  if(text=="") alert("경고: 전화번호"+num+"부분을 입력하세요.");
}
  </script>
</HEAD>
<BODY>
  <form name="form">
    <b>전화번호:</b>
    <input type="text" name="first" value="" size="3" onBlur="searchNum(this.value,1)">
    -
    <input type="text" name="second" value="" size="4" onBlur="searchNum(this.value,2)">
    -
    <input type="text" name="third" value="" size="4" onBlur="searchNum(this.value,3)">
</BODY>
</HTML>
Colored by Color Scripter

cs

전화번호 텍스트 박스 상자가 3개 있는데 텍스트 박스에 정보를 입력하지 않은 상태에서 커서를 올려놓았다가 다시 텍스트 박스 이외의 영역을 클릭하게 되면 다음과 같이 alert() 메소드에 의해서 경고 메시지가 나옵니다.

첫 번째 부분에 커서를 놓았다가 이외의 영역을 클릭하면 '1 부분'이라고 뜨고 두 번째는 2, 세 번째는 3입니다.

위의 예시로 onFocus를 설명하자면 onFocus는 반대로 텍스트 박스에 커서를 놓을 때 발생하는 이벤트를 설정할 수 있는 이벤트 핸들러입니다.

③ Load 관련 이벤트

onLoad : 문서가 웹브라우저로 읽힐 때 발생하는 이벤트를 다루는 이벤트 핸들러

onUnload : 문서가 웹브라우저에서 닫힐 때 발생하는 이벤트를 다루는 이벤트 핸들러 (크롬 지원 x)

로그아웃할 경우 발생함.

onBeforeUnload : 문서 웹브라우저가 오른쪽 상단 위의 x버튼을 클릭했을 경우 꺼지기 전에 실행되는 이벤트를 다루는 이벤트 핸들러 (크롬 지원 x)

다음은 인터넷 익스플로러에서의 예제입니다.

크롬에서는 한글이 깨지지 않았지만 인터넷 익스플로러에서는 한글이 깨지기 때문에 <Title> 태그 아래에 <meta charset="utf-8> 코드를 넣어줘야 한글이 깨지지 않습니다.

1
2
3
4
5
6
7
8

<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
</HEAD>
<BODY onLoad="alert('전화번호를 입력하세요');" onBeforeUnload="return '리얼?';">
</BODY>
</HTML>
 
Colored by Color Scripter

cs

④ onChange 이벤트

onChange : 입력 양식 폼의 구성요소 중 select, text, textarea 객체의 필드에 값을 입력한 후, 포커스(Focus)를 잃었을 때 발생되는 이벤트를 다루는 이벤트 핸들러

다음은 예제입니다.

1
2
3
4
5
6
7
8
9

<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
</HEAD>
<BODY>
  <input type="text" onchange="alert('changed')">
</Body>
</HTML>
 
Colored by Color Scripter

cs

처음에 비어있는 텍스트 상자에 아무 글자를 입력한 후 텍스트 상자의 커서를 잃게 하기 위해 아무 배경을 클릭하면 위와 같이 alert() 메소드를 통해 알림 상자가 발생하게 됩니다.

텍스트 상자 내의 글자가 바뀌었을 경우만 알림상자가 발생합니다.

저작자표시 비영리 변경금지

'It공부 > JavaScript' 카테고리의 다른 글

7. 입력 양식 객체 (0)	2020.07.29
6. 웹브라우저 내장객체 (0)	2020.07.28
4. 객체 (0)	2020.07.26
3. 함수 (0)	2020.07.24
2. 연산자와 제어 구조 (0)	2020.07.24