Day 47 : 이벤트 객체

pancakemaker 2021. 12. 22. 16:00

1. 이벤트 객체

: 이벤트가 발생하면, 브라우저는 발생한 이벤트에 관련된 다양한 정보를 담은 이벤트 객체를 만들어 이벤트 리스너에 전달

: 이벤트가 처리되고 나면 이벤트 객체는 소멸됨

2. 이벤트 객체 전달받기

① 이름을 가진 이벤트 리스너 함수

function f(e) {		//매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능
...
}
obj.onclick = f;	//obj 객체의 onclick 리스너로 함수 f 등록

② 익명 함수의 경우

obj.onclick = function(e) {		//매개변수 e에 이벤트 객체 전달받음. e는 생략 가능
...
}

③ HTML 태그의 리스너 경우

function f(e) {		//매개변수 e로 event 객체를 전달받음
...
}
...
<button onclick="f(event)">버튼</button>
<div onclick=alert(event.type)">버튼</div>

<예시>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>이벤트 객체 전달받기</title>
</head>
<body>
	<p id="p">마우스를 올려보세요</p>
	<button onclick="f(event)">클릭하세요</button>
	<script>
		function f(e) {		//e는 현재 발생한 이벤트 객체
			alert(e.type);	//이벤트 종류 출력
		}
		document.getElementById("p").onmouseover=f;
	</script>
</body>
</html>

3. 이벤트 객체에 들어 있는 정보

- 이벤트 타겟 : 이벤트를 유발시킨 태그(객체)

- type 프로퍼티 : 현재 발생한 이벤트의 종류를 나타내는 문자열 (click, load 등)

- target 프로퍼티 : 이벤트 타겟 객체

- currentTarget 프로퍼티 : 현재 이벤트 리스너를 실행하고 있는 DOM 객체

- defaultPrevented 프로퍼티 : 이벤트의 디폴트 행동이 취소되었는지를 나타내는 true/false 값

- preventDefault() 메소드 : 이벤트의 디폴트 행동을 취소시키는 메소드

<예시>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>이벤트 객체 프로퍼티</title>
</head>
<body>
	<h3>이벤트 객체의 프로퍼티 출력</h3>
	<hr>
	<p id="p">버튼을 클릭하면 이벤트 객체를 출력합니다.</p>
	<button onclick="f(event)">클릭하세요</button>
	<script>
		function f(e) {
			var text = "type: " + e.type + "<br>" 
				+ "target: " + e.target + "<br>"
				+ "currentTarget: " + e.currentTarget + "<br>"
				+ "defaultPrevented: " + e.defaultPrevented;

			var p = document.getElementById("p");
			p.innerHTML=text;	//이벤트 객체의 프로퍼티 출력
		}
	</script>
</body>
</html>

4. 이벤트의 디폴트 행동 취소 : preventDefault()

- 디폴트 행동 : <a> 태그를 클릭하면 웹 페이지를 로드하는 것이나, submit 버튼을 클릭하면 폼 데이터를 웹 서버로 전송하는 것이나, reset 버튼을 클릭하면 폼을 초기화하는 등의 정해진 행동

<a href="http://www.naver.com" onclick="return false">이동 안되는 링크</a>
<input type="checkbox" onclick="return false">체크 안되는 체크 박스

<a href="http://www.naver.com" onclick="event.preventDefault()">이동 안되는 링크</a>

<예시>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>이벤트 디폴트 행동 취소</title>
	<script>
		function query() {
			var ret = confirm("네이버로 이동하시겠습니까?");
			return ret;		//confirm()의 리턴 값은 true or false
		}
		function noAction(e) {
			e.preventDefault();
		}
	</script>
</head>
<body>
	<h3>이벤트 디폴트 행동 취소</h3>
	<hr>
	<a href="http://www.naver.com" onclick="return query()">네이버로 이동할 지 물어보는 링크</a>
	<hr>
	<form>
		<input type="checkbox">빵(체크 됨)<br>
		<input type="checkbox" onclick="noAction(event)">술(체크 안됨)
	</form>
</body>
</html>