[Javascript] 이벤트

우리가 웹 페이지에 들어가면 보통 클릭을 하거나, 마우스 커서를 올리거나 하는 행동을 합니다. 이처럼 웹 상에서 일어나는 상황들을 이벤트라고 합니다. 그리고 대다수는 이 이벤트가 발생함에 따라 처리를 실행하게 됩니다.

---

1. 클라이언트측 이벤트

자바스크립트는 클라이언트측에서 프로그래밍하게 되므로 클라이언트측 이벤트를 다루게 됩니다. 이들은 다음 표로 정리할 수 있는데, 외운다기 보다는 읽어보면 당연하고, 이런 동작이 있었지 정도로 이해해도 충분합니다.

분류	이벤트 이름	이벤트 설명(이벤트가 발생)
페이지 읽기	abort	이미지의 로딩이 중단되는 경우
	load	페이지+이미지의 로딩이 완료된 경우
	unload	다른 페이지로 이동
키 조작	keydown	키를 누름
	keypress	키를 누르고 있음
	keyup	키를 뗌
포커스	blur	요소에서 포커스가 벗어남
	focus	요소에 포커스가 됨
폼 요소	change	폼의 내용이 변경
	reset	폼이 리셋
	submit	폼이 제출됨(보통은 버튼 이벤트를 통해)
마우스 조작	click	클릭
	dbclick	더블 클릭
	mousedown	마우스 버튼을 누르고 있음
	mouseup	마우스 버튼을 뗌
	mousemove	마우스를 움직임
	mouseover	마우스 포인터가 요소에 올라가있음
	mouseout	마우스 포인터가 요소에서 벗어남
	mouseenter	마우스 포인터가 요소에 올라가있음
	mouseleave	마우스 포인터가 요소에서 벗어남
	contextmenu	contextmenu가 표시되기 이전(마우스 우클릭)
기타	resize	요소의 사이즈 변경
	scroll	스크롤

 

보니까 중간에 mouseover/mouseenter, mouseout/mouseleave의 설명이 둘다 똑같은 요소에 올라감/벗어남 입니다.

두개의 차이는 자식요소의 포함여부인데 over와 out은 지정된요소에 마우스가 올라가면 이벤트가 발생하고 그 요소 아래의 자식요소에 마우스가 over되고 out되는 경우까지 포함되어 이벤트를 발생시킵니다. 그러나 enter와 leave는 단순하게 해당 요소에만 마우스가 올라가고 벗어남에 따라 이벤트를 발생시킵니다.

 

 

 

 

2. 이벤트 핸들러, 이벤트 리스너

이벤트 핸들러와 리스너는 이벤트가 발생함에 따라 동작을 정의한 것입니다. 이벤트가 발생하면 이벤트 등록을 하고 동작을 정의해야 스크립트가 실행되는데요. 이 등록방법에는 세가지가 있으며 이벤트를 불러올때는 보통 'on이벤트명'의 조합을 통해 이벤트를 불러옵니다.

 

2-1. 태그 내부에 정의

첫 번째 방법은 태그 내부에서 속성 개념으로 정의하는 방법입니다. 그러나 자바스크립트의 초반 포스트에 말했듯이 html문서에 스크립트 코드를 기술하는 것은 가독성을 해치며 좋지 못한 구조라고 했기 때문에 정의 방법만 살짝 보고 넘어가도록 하겠습니다.

 

<button id="btn1" onclick="btn_click()">
//"btn_click()"대신 코드를 기술하는것도 가능!

function btn_click() {
	//버튼 클릭시 동작 할 기능
}

 

 

 

2-2. 요소 객체의 프로퍼티로 선언

이 방법은 html과 js파일을 더욱 깔끔하게 분리시키는 방법입니다. 노드를 취득하고 거기에 객체 형식으로 이벤트를 등록하는 방법입니다.

 

<button id="btn1">

document.getElementById('btn1').onclick = function() {
	//클릭시 일어날 이벤트 기술
};

 

추가적으로 예시에서는 바로 document.getElem~을 했지만 실사용에서는 페이지를 먼저 로드해야합니다. 왜냐하면 페이지를 먼저 불러오기전에 요소를 추출한다면 순서적으로 올바르지 않기 때문에 오류를 발생시키기 때문입니다. 그래서 위의 예제를 올바른 구문으로 수정한다면 아래와 같이 사용됩니다.

 

window.onload = function() {
	document.getElementById('btn1').onclick = function() {
    	};
};

 

 

 

 

2-3. addEventListener 메소드 이용

마지막 세번째 방법은 이벤트 리스너를 이용하는 것 인데요. 이 방법이 등장하게 된 이유는 이전의 방법들은 하나의 요소에서 어떤 이벤트를 이용했다면 그 이후로는 그 요소에서 그 이벤트에 대한 다른 동작을 정의 할 수 없었습니다.

그래서 등장한 것이 이 이벤트 리스너 개념이며, 이는 동일 요소에 동일 이벤트에 대해 여러 기능들을 정의 할 수 있게 해주었습니다. 사용방법도 이전방법들과 크게 다르지 않습니다.

 

elem.addEventListener(이벤트 타입, 이벤트 작업)

<button id="btn1">

document.getElementById('btn1').addEventListener('click', function() {
	//이벤트의 동작
}, false);

(우선 마지막에 나오는 false는 무시하고 지나갑시다. 나중에 따로 다룰예정입니다.)

 

마찬가지로 이 작업도 또한 페이지 로드 이후 수행하는 것이 좋습니다. 그래서 load이벤트 이후 작성하게 되는데 이벤트 리스너를 통한 로드는 조금 형태가 다릅니다.

 

document.addEventListener('DOMContentLoaded', function() {
	document.getElementById('btn1').addEventListener('click', function() {
		//이벤트의 동작
	}, false);
}, false);

DOMContentLoaded인데요. 이것도 마찬가지로 페이지가 로드될때 수행하라는 이벤트입니다. 그렇다면 onload와는 무슨차이가 있을까요.

바로 이미지 로딩의 차이입니다. onload는 페이지로드+이미지 로드가 둘 다 된 상태에 처리를 시작하라는 의미이고, DOMContentLoaded는 이미지를 제외하고 페이지로드가 다 된 시점에 처리를 시작하라는 의미입니다.

 

그렇기에 DOMContentLoaded의 동작이 더 빠르고, 보통 이미지에 로드는 처리할 이벤트가 없으므로 DOMContentLoaded를 이용하는 것이 더 좋은방법이라고 할 수 있습니다.

 

---