html5 문법 (8) 이벤트 심화[사용자 화면]

(8) 이벤트 심화

단순한 어플리케이션을 제작할 때는 주로 클릭과 취소 이벤트 정도가 사용된다. 하지만 자바스크립트가 성장하면서, 사용자의 반응이 중요해졌다. 특히, 모바일에서 터치는 어플의 평판을 좌우한다. 사용자의 상태나 입력코드를 이벤트로 받아서 좀더 정밀한 사용자 경험을 제공하고 싶다면, 이벤트와 사용자 화면의 관계를 명확하게 파악해야 한다.

1 이벤트 핸들러 삭제

이벤트 핸들러를 삭제하는 방법은 간단한다. 이벤트 핸들러 값에 'null'값을 넣으면 된다.

---

[예제]

<form> 

<input type="button" value="이벤트 취소" id="btn" name=""> 

</form>

<script type="text/javascript">

btn.onclick = function(){

window.alert('이벤트 발생');

}

btn.onclick = null;

</script>

---

2 이벤트 리스너 삭제 

이벤트 실행문을 익명함수로 listener 변수에 저장한다. addEventListener( )에서 인자로 이벤트 동작타입과 함께 listener를 넣는다. 삭제는 removeEventListener( ) 메소드를 붙여주면 된다.

---

[예제]

<form> 

<input type="button" value="버튼" id="btn" name=""> 

</form>

<script type="text/javascript">

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

var btn = document.getElementById('btn');

var listener = function(){

alert('이벤트 심화');

}

btn.addEventListener('click',listener,false);

btn.removeEventListener('click',listener,false);

})

</script>

---

3 이벤트 객체

이벤트도 하나의 객체이다. 따라서 이벤트의 정보를 받을 수 있다.

---

[예제]

<form>

<input type="button" id="btn" value="클릭">

</form>

<script type="text/javascript">

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

document.getElementById('btn').addEventListener('click',function(e){

var target = e.target;

console.log('발생원:'+ target.nodeName +'/'+target.id);

console.log('종류:'+ e.type);

});

});

</script>

---

결과값으로 "발생원:INPUT/btn(id값)'  , 종류: click 값을 얻을 수 있다. 이벤트 객체를 받기 위해서는 인수값에 e나 ev(관습)를 지정해주면 된다. 만일 이벤트 객체를 이용하지 않는다면, 인수는 생략가능하다.

**참고사항:: 이벤트객체 종류 

사용처	종류	설명
일반	bubbles	이벤트가 버블링인가?
	cancelable	이벤트가 취소 가능한가?
	currentTarget	이벤트 버블에서 현재 요소를 취득
	defaultPrevented	preventDefault 메소드가 호출되었는가?
	eventPhase	이벤트의 흐름이 어느 단계에 있는가?
	target	이벤트 발생원의 요소
	type	이벤트의 종류 (ex. click, mousemove 등..)
	timeStamp	이벤트의 작성 일시를 취득
좌표	clientX	이벤트의 발생 좌표 ( 브라우저에서의 X좌표 )
	clientY	이벤트의 발생 좌표 ( 브라우저에서의 Y좌표 )
	screenX	이벤트의 발생 좌표 ( 스크린상에서의 X좌표 )
	screenY	이벤트의 발생 좌표 ( 스크린상에서의 Y좌표 )
	pageX	이벤트의 발생 좌표 ( 페이지상의 X좌표 )
	pageY	이벤트의 발생 좌표 ( 페이지상의 Y좌표 )
	offsetX	이벤트의 발생 좌표 ( 요소상의 X좌표 )
	offsetY	이벤트의 발생 좌표 ( 요소상의 Y좌표 )
마우스 /  키보드	button	마우스의 어느 버튼이 입력되고 있는가?   0 : 좌측 버튼   1 : 가운데 버튼   2 : 우측 버튼
	key	입력된 키의 값
	keyCode	입력된 키의 코드
	altKey	alt 키가 입력되고 있는가?
	ctrlKey	ctrl키가 입력되고 있는가?
	shiftKey	shift키가 입력되고 있는는가?
	mataKey	meta 키가 입력된 상태인가?

4 마우스 이벤트 구분

마우스 이벤트에서, 좌표를 알 수 있는 이벤트 맴버는 client, screen, page, offset 이다. screen은 사용자가 보고 있는 모니터 화면에서의 좌표값이다. 만일 모니터가 2400 x 1600 이라면, 좌측 상단은 2400이다. 듀얼 모니터라면, 값이 3~4000까지 나올 수도 있다. 

screen은 절대좌표라 생각하면 이해하기 편하다.

client는 웹 브라우저의 좌측 상단(0,0)을 기준으로 하는 좌표값이다. GUI를 만들때, 브라우저의 여백에 관해서 잘 생각해봐야 할 값이다.

offset은, 해당 요소(ex. div)의 좌측 상단(0,0)을 기준으로 하는 좌표값이다. 임의의 창을 만들고, 그 안에서만 사건(?)들이 발생한다면, 아마도 offset값이 가장 많이 사용될 것이다. 

page는, 브라우저 여백부분만 차이있을 뿐 client값과 같다. 관련 예제를 보자.

---

[예제]

<div id="main" style="position:absolute; margin:50px; top:50px; left:50px; width:200px; height:200px; border:1px solid black;"></div>

<script type="text/javascript">

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

var main = document.getElementById('main');

     main.addEventListener('mousemove',function(e){

main.innerHTML = 'screen' + e.screenX + '/' + e.screenY + '</br>'

   + 'client' + e.clientX + '/' + e.clientY + '</br>'

   + 'offset' + e.offsetX + '/' + e.offsetY + '</br>';

});

})

</script>

---