html5 문법 (3) 이벤트

(3) 이벤트

 이벤트는 DOM뿐만 아니라 모든 MVC패턴 개발의 View에서 필수적인 요소다. 이벤트는 사용자와 개발자를 연결해준다. 사용자는 이벤트를 통해 어플리케이션의 기능을 사용할 수 있다. 이벤트 핸들러나 연결이 적절치 못하다면, 아무리 화려한 GUI를 갖추더라도 최악의 프로그램이 된다. 

과거 웹2.0 시대는 이벤트가 있었기에 가능했다. 이벤트는 반응형 웹개발의 시작점이다. 이벤트는 쉽고, 간단하지만 중요하다. 만일, IOT분야에서 기계가 의도(이벤트)대로 작동하지 않으면, 사람의 목숨과 직결될 수도 있기 때문에 이벤트에 관한 부분은 무엇보다 작동이 정확해야 한다.

1 이벤트 종류

분류	이벤트	동작	타겟
읽기	abort	이미지의 로딩이 중단되었을 때	img
	load	페이지, 이미지의 로딩 완료 시	body, img
	unload	다른 페이지로 이동할 때	body
마우스	click	마우스 클릭 시
	dbclick	마우스 더블 클릭 시
	mousedown	마우스 버튼을 눌렀을 때
	mouseup	마우스 버튼을 뗏을 때
	mousemove	마우스 포인터가 움직였을 때
	mouseover	요소에 마우스 포인터가 올라갔을 때
	mouseout	요소에서 마우스 포인터가 벗어났을 때
	mouseenter	요소에 마우스 포인터가 올라갔을 때
	mouseleave	요소에 마우스 포인터가 벗어났을 때
	contextmenu	context menu가 표시되기 전	body
키	keydown	키를 눌렀을 때
	keypress	키를 누른 상태
	keyup	키를 뗏을 때
폼	change	내용이 변경되었을 때	input(text) , select
	reset	리셋 버튼을 눌렀을 때	form
	submit	서브밋 버튼이 눌러졌을 때	form
포커스	blur	포커스가 벗어났을 때
	focus	포커스 되었을 때
그 외	resize	사이즈를 변경했을 때
	scroll	스크롤 했을 때	body

 위의 표에서 주의해야할 이벤트는 mouseover / mouseout 이벤트와 mouseenter / mouseleave 이벤트이다. mouseover / mouseout은 특정요소에 진입할 때와 나갈 때마다 감지해서 이벤트가 발생한다.

반면, mouseenter / mouseleave 같은 경우에는 특정 요소에 진입할 때 1번 나타나고, 나갈 때 1번 나타난다. 특정요소의 하위 노드에 입출입하더라도 이벤트는 발생하지 않는다. 

2 이벤트 선언

이벤트 선언의 방법은 3가지다.

1) 태그 내의 속성으로 선언하기

2) 요소 객체의 프로퍼티로 선언하기

3) addEventListener 메소드로 선언하기 

1) , 2) 방식으로 선언한 방식을 '이벤트 핸들러'라고 한다. 

3) 방식으로 선언한 이벤트는 '이벤트 리스너'라 하는데, 주로 3)이 권장사항이다.

간단하게 이벤트를 선언할 때는 1)의 방식을 사용해도 상관없다.

---

[예제]

<input type="button" value="이벤트" onclick="btn_click( )" >

function btn_click( ){

alert('이벤트 발생");

}

//결과: 버튼을 클릭하면, '이벤트 발생' 메시지 발생

---

onclick과 같은 이벤트 핸들러 방식은, 간단한 코드에서 이벤트를 사용할 때 사용하도록 권장된다. 왜냐하면, 자바스크립트 코드가 html 태그와 섞이면, 가독성에 문제가 생기기 때문이다. 따라서 아래처럼 요소로 사용할 것을 추천한다.

---

[예제]

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

window.onload = function( ){

document.getElementById('btn').onclick = function( ){ 

window.alert('클릭');

}

}

---

2)방식의 요소 이벤트 핸들러에서 주의할 점은,  '요소.이벤트명 = 함수명'으로 기입해야 한다는 점이다. 함수명에 함수( ) 식으로 넣으면, 즉시 실행이 되어 이벤트가 진행되지 않으니 주의하자.

3)방식의 addEventListener 선언은 가장 표준적인 이벤트 선언방식이며 권장사항이다.

---

[예제]

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

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

alert('버튼이 클릭되었습니다.');

})

})

---

위의 예제와 같이 addEventListener를 사용하면, 여러개의 이벤트 리스너를 설정할 수 있다는 장점이 있다. 위의 코드에서 DOMContentLoaded 이벤트를 사용했다. 만일, '이미지'에 특별한 설정이 꼭 필요하지 않다면, onload 이벤트 대신 사용하자.