[javascript] 이벤트 처리

728x90

이벤트는 사용자의 특정 행위나 문서 안에서 발생하는 각종 변화를 말합니다. 버튼을 누르고 input박스에 입력하는 등 상호작용에 필요한 모든 동작은 물론 아래 예제와 같이 문서의 로드가 완료되는 것도 하나의 이벤트에 해당합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		window.onload = function() {
			
		};
	</script>
</head>
<body>

</body>
</html>

위 예제는 window객체에서 문서의 로드완료를 알리는 onload라는 이벤트 속성에 function이라는 이벤트 리스너(또는 이벤트 핸들러) 메서드를 연결한 것입니다.

이 외에 특정 요소에 다음과 같이 임의의 메서드를 이벤트에 연결할 수도 있습니다. 예제는 span요소의 클릭이벤트(onclick 속성)에 span_msg라는 메서드를 연결한 것입니다. 물론 요소는 클릭 이외에도 다른 다양한 이벤트를 연결할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		var span_msg = function () {
			alert('안녕하세요.');
		};

		window.onload = function() {
			var o = document.getElementById('myspan');
			o.onclick = span_msg;
		};
	</script>
</head>
<body>
	<span id="myspan">cliel.com</span>
</body>
</html>

위와 같이 javascript를 통해 이벤트를 연결하는 대신 요소에 직접 click속성을 사용해 이벤트를 부여할 수도 있습니다. 이러한 방식을 인라인방식이라고 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		var span_msg = function () {
			alert('안녕하세요.');
		};
	</script>
</head>
<body>
	<span onclick="javascript: span_msg();">cliel.com</span>
</body>
</html>

이렇게 인라인형식으로 이벤트를 부여하면 이벤트 연결에 필요한 javascript코드를 일부 줄일 수 있으므로 자주 사용되는 방법이기도 합니다. 실행할 코드가 극히 작은 경우 javascript코드를 그대로 실행한다는 특징을 이용해 실행할 javascript코드를 그대로 넣어 처리하는 경우도 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		
	</script>
</head>
<body>
	<span onclick="javascript: alert('안녕하세요');">cliel.com</span>
</body>
</html>

위에서 알아본 이벤트 연결방식은 고전적인 방식으로 W3C에서 지정한 공식적인 별도의 방법이 따로 존재합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		var span_msg = function () {
			alert('안녕하세요.');
		};

		window.onload = function() {
			var o = document.getElementById('myspan');
			
			o.addEventListener('click', function() {
				alert('event');
			});
		};
	</script>
</head>
<body>
	<span id="myspan">cliel.com</span>
</body>
</html>

위와 같이 addEventListener메서드를 이용하는 것입니다. 이 메서드는 첫 번째 매개변수에 이벤트명을, 두 번째 매개변수에 실행할 이벤트 핸들러 메서드를 지정하면 됩니다.

이러한 방법의 가장 큰 특징은 하나의 요소에 여러 이벤트를 지정할 수 있다는 것입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		var span_msg = function () {
			alert('안녕하세요.');
		};

		window.onload = function() {
			var o = document.getElementById('myspan');
			
			o.addEventListener('click', function() {
				alert('event1');
			});
			o.addEventListener('click', function() {
				alert('event2');
			});
			o.addEventListener('click', span_msg);
		};
	</script>
</head>
<body>
	<span id="myspan">cliel.com</span>
</body>
</html>

이벤트를 제거하고자 하는 경우는 그냥 null을 지정해 주면 됩니다. 예컨데 위 예제에서 span을 클릭시 alert으로 메시지를 표시한 다음 곧바로 onclick이벤트에 null을 지정하면 다시 클릭할 때 이벤트는 더 이상 작동하지 않을 것입니다.

var span_msg = function () {
	alert('안녕하세요.');

	this.onclick = null;
};

W3C 표준으로 이벤트를 제거하려면 removeEventListener메서드를 사용합니다.

var span_msg = function () {
	alert('안녕하세요.');

	this.removeEventListener('click', span_msg);
};

window.onload = function() {
	var o = document.getElementById('myspan');

	o.addEventListener('click', function() {
		alert('event1');
	});
	o.addEventListener('click', function() {
		alert('event2');
	});
	o.addEventListener('click', span_msg);
};

이벤트 제거가 아닌 특정 상황에서의 취소와 같은 동작이 필요하다면 이벤트 리스너에서 false를 반환하도록 하면 됩니다.

var span_msg = function () {
	return false;
	
	alert('안녕하세요.');
};

window.onload = function() {
	var o = document.getElementById('myspan');
	o.onclick = span_msg;
};

만약 인라인에서 이벤트가 연결되었다면 'return 메서드'와 같은 형식을 취하도록 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		var span_msg = function() {
			return false;

			alert('안녕하세요');
		};
	</script>
</head>
<body>
	<span onclick="javascript: return span_msg();">cliel.com</span>
</body>
</html>

조금 전 이벤트에서 이벤트 제거를 위해 'this.onclick = null;' 구문을 사용했는데 이때 this는 이벤트를 발생시킨 요소를 의미합니다. 이러한 특징을 이용하면 this를 통해 이벤트를 제거하는 것은 물론 필요한 다른 동작도 수행할 수 있으며 W3C 표준으로 이벤트를 연결한 경우에도 마찬가지입니다.

var span_msg = function () {
	alert('안녕하세요.');

	this.style.backgroundColor = 'red';
};

이벤트를 발생시킨 객체이외에 더 많은 정보를 얻고자 한다면 다음과 같이 이벤트 리스너의 매개변수를 지정하면 됩니다. 그러면 이벤트 발생시 매개변수에 자동으로 이벤트 관련 정보를 전달하게 되고 그 정보를 통해 이벤트 발생에 관한 상세한 내용을 확인할 수 있게 됩니다.

var span_msg = function (e) {
	for (var event in e)
	document.body.innerHTML += event + ':' + e[event] + '<br />';
};

window.onload = function() {
	var o = document.getElementById('myspan');
	o.onclick = span_msg;
};

예컨대 위 결과를 보면 ctrlKey나 shiftKey 등을 봤을 때 false라고 되어 있으므로 이를 통해 이벤트 발생 시 Ctrl이나 Shift 키가 눌려있지 않다는 것을 알 수 있습니다. 이러한 방식은 이벤트를 발생시킬 때 여러 요소가 이벤트를 발생시키는 경우 의도하지 않은 동작을 방지하기 위한 용도로도 사용될 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		window.onload = function() {
			var mydiv = document.getElementById('mydiv');
			mydiv.onclick = function () {
				alert('div');
			}

			var myp = document.getElementById('myp');
			myp.onclick = function () {
				alert('p');
			}

			var myspan = document.getElementById('myspan');
			myspan.onclick = function () {
				alert('span');
			}
		};
	</script>
</head>
<body>
	<div id="mydiv">
		<p id="myp">
			<span id="myspan">
				cliel.com
			</span>
		</p>
	</div>
</body>
</html>

이 예제에서는 span에 대한 동작을 위해 span을 클릭한다고 하더라도 myspan, myp, mydiv 순서대로 메시지를 표시하게 됩니다. 이러한 현상을 이벤트 버블링이라고 하며 이벤트가 자식 요소에서 부모 요소로 이벤트가 전달되는 현상을 의미합니다.

만약 이러한 현상을 의도하지 않은 경우라면 stopPropagation 메 세드를 호출하는 것으로 이벤트 버블링을 차단할 수 있습니다.

window.onload = function() {
	var mydiv = document.getElementById('mydiv');
	mydiv.onclick = function (e) {
		alert('div');
	}

	var myp = document.getElementById('myp');
	myp.onclick = function (e) {
		alert('p');

		e.stopPropagation();
	}

	var myspan = document.getElementById('myspan');
	myspan.onclick = function (e) {
		alert('span');
	}
};

예제는 myp의 이벤트 리스너에서 stopPropagation을 호출했으므로 span, p 다음으로는 더 이상 이벤트가 진행되지 않을 것입니다.

※ 이벤트 버블링과 반대로 부모에서 자식으로 내려가는 캡쳐링이 있으나 이는 브라우저에서 지원하지 않습니다. 또한 stopPropagation메서드는 익스플로러에서는 사용할 수 없으며 대신 cancelBuble속성에 true를 설정해야 합니다.

이벤트는 필요한 경우 임의로 발생시킬 수도 있습니다. 이제까지 예제는 사용자가 span을 클릭해야만 이벤트가 발생했지만

var span_msg = function (e) {
	alert('Event');
};

window.onload = function() {
	var o = document.getElementById('myspan');
	o.onclick = span_msg;

	o.onclick();
};

o.onclick()처럼 이벤트 속성을 그대로 호출하면 임의로 이벤트를 발생시킬 수 있습니다.

728x90

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

'Web > Javascript' 카테고리의 다른 글

[javascript / jQuery] 크로스 도메인 (0)	2020.07.03
[javascript] 예외 처리 (0)	2020.05.30
[javascript] 문서 객체 다루기 (0)	2020.05.27
[javascript] 브라우저 관련 객체 (0)	2020.05.26
[javascript] 기본 내장 객체 (표준 내장 객체) (0)	2020.05.26

'Web > Javascript' 카테고리의 다른 글

티스토리툴바