[JavaScript] 이벤트 타입

이벤트 타입

아래는 onclick 이벤트 타입의 예제다. 이벤트 타입이라는 것은 이벤트의 종류라고 할 수 있다. 사용자 정보가 유효한지 여부를 확인하기 위해 이벤트를 많이 사용한다.

웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 하위 토픽에서는 주요한 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는지 알아보겠다.

1. 폼

폼과 관련된 이벤트 타입을 알아보자.

(1) submit

- submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.

- form 태그에 적용된다.

아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다.

</form>

var t = document.getElementById('target');

t.addEventListener('submit', function(event){

if(document.getElementById('name').value.length === 0){

alert('Name 필드의 값이 누락 되었습니다');

event.preventDefault();

}

});

</script>

(2) change

- change는 폼 컨트롤(value의 값)의 `값이 변경 되었을 때 발생하는 이벤트다.

- input(text,radio,checkbox), textarea, select 태그에 적용된다.

var t = document.getElementById('target');

t.addEventListener('change', function(event){

document.getElementById('result').innerHTML=event.target.value;

});

</script>

(3) blur, focus

- focus는 엘리먼트에 포커스가 생겼을 때(input의 text 프로퍼티 테두리 내부를 클릭했을때), blur은 포커스가 사라졌을 때 발생(input의 text 프로퍼티 테두리 외부를 클릭했을 때)하는 이벤트다.

- 다음 태그를 제외한 모든 태그에서 발생한다. <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>

var t = document.getElementById('target');

t.addEventListener('blur', function(event){

alert('blur');

});

t.addEventListener('focus', function(event){

alert('focus');

});

</script>

2. 문서 로딩

자바스크립트를 실행할 때 어떤 타이밍에 실행을 해야지만 문서에 있는 엘리먼트에 정확하게 문제없이 명령을 실행하느냐의 문제가 문서 로딩 part에서 다루는 부분이다.

웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.

아래 코드의 실행결과는 null이다. <p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문이다.

<html>

<head>

var t = document.getElementById('target');

console.log(t);

</script>

</head>

<body>

<p id="target">Hello</p>

</body>

</html>

실행결과)

null

- null 인 이유: 자바스크립트를 통해서 id값이 target인 엘리먼트를 찾고 있는 시점에서는 p태그가 만들어져 있지 않기 때문이다.

(존재하지 않는 대상에 대해서 참조하려고 했기 때문에 document.getElementById('target')의 리턴값이 null이다.)

이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이다.(위에서 아래로 순차적으로 로딩된다.)

<p id="target">Hello</p>

var t = document.getElementById('target');

console.log(t);

</script>

또 다른 방법은 load 이벤트를 이용하는 것이다.

<head>

window.addEventListener('load', function(){

var t = document.getElementById('target');

console.log(t);

})

</script>

</head>

<body>

<p id="target">Hello</p>

</body>

그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행(onload: 다운로드 끝날때까지 호출되지 않는다.)된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.

<html>

<head>

window.addEventListener('load', function(){

console.log('load');

})

window.addEventListener('DOMContentLoaded', function(){

console.log('DOMContentLoaded');

})

</script>

</head>

<body>

<p id="target">Hello</p>

</body>

</html>

DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있다.

3. 마우스

(1) 이벤트 타입

웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.

1) click

클릭했을 때 발생하는 이벤트.

2) dblclick

더블클릭을 했을 때 발생하는 이벤트

3) mousedown

마우스를 누를 때 발생

4) mouseup

마우스버튼을 땔 때 발생

5) mousemove

마우스를 움직일 때

6) mouseover

마우스가 엘리먼트에 진입할 때 발생

7) mouseout

마우스가 엘리먼트에서 빠져나갈 때 발생

8) contextmenu

컨텍스트 메뉴가 실행될 때 발생

(2) 키보드 조합

마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.

- event.shiftKey

- event.altKey

- event.ctrlKey

(3) 마우스 포인터 위치

마우스 이벤트와 관련한 작업에서는 마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데 이런 경우 이벤트 객체의 clientX와 clientY를 사용한다.

(4) 예제

아래 예제는 지금까지 살펴본 이벤트와 관련된 기능을 종합적으로 보여준다.

<html>

<head>

<style>

body{

background-color: black;

color:white;

}

#target{

width:200px;

height:200px;

background-color: green;

margin:10px;

}

table{

border-collapse: collapse;

margin:10px;

float: left;

width:200px;

}

td, th{

padding:10px;

border:1px solid gray;

}

</style>

</head>

<body>

</div>

<table>

<tr>

<th>event type</th>

</tr>

<tr>

<td>click</td>

</tr>

<tr>

<td>dblclick</td>

</tr>

<tr>

<td>mousedown</td>

</tr>

<tr>

<td>mouseup</td>

</tr>

<tr>

<td>mousemove</td>

</tr>

<tr>

<td>mouseover</td>

</tr>

<tr>

<td>mouseout</td>

</tr>

<tr>

<td>contextmenu</td>

</tr>

</table>

<table>

<tr>

</tr>

<tr>

<td>event.altKey</td>

</tr>

<tr>

<td>event.ctrlKey</td>

</tr>

<tr>

<td>event.shiftKey</td>

</tr>

</table>

<table>

<tr>

<th>position</th>

</tr>

<tr>

<td>event.clientX</td>

</tr>

<tr>

<td>event.clientY</td>

</tr>

</table>

var t = document.getElementById('target');

function handler(event){

var info = document.getElementById('elm'+event.type);

var time = new Date();

var timestr = time.getMilliseconds();

info.innerHTML = (timestr);

if(event.altKey){

document.getElementById('elmaltkey').innerHTML = timestr;

}

if(event.ctrlKey){

document.getElementById('elmctrlkey').innerHTML = timestr;

}

if(event.shiftKey){

document.getElementById('elmshiftKey').innerHTML = timestr;

}

document.getElementById('elemclientx').innerHTML = event.clientX;

document.getElementById('elemclienty').innerHTML = event.clientY;

}

t.addEventListener('click', handler);

t.addEventListener('dblclick', handler);

t.addEventListener('mousedown', handler);

t.addEventListener('mouseup', handler);

t.addEventListener('mousemove', handler);

t.addEventListener('mouseover', handler);

t.addEventListener('mouseout', handler);

t.addEventListener('contextmenu', handler);

</script>

</body>

</html>

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 이벤트 등록방법 (0)	2014.12.25
[JavaScript] 이벤트 (0)	2014.12.25
[JavaScript] Text 객체 (0)	2014.12.23
[JavaScript] Document 객체 (0)	2014.12.23
[JavaScript] Node 객체 (1)	2014.12.23

'WebFont-end > JavaScript' 카테고리의 다른 글

티스토리툴바