[006] 자바스크립트 (JavaScript) - 핵심요약(DOM Event)

안녕하세요~ totally 개발자입니다.

 

DOM Event

 

오늘은 Event, HTML의 DOM(Document Object Model)에 대한 이벤트들을 살펴봅니다. 자바스크립트의 이벤트를 활용하여 HTML에서 사용자가 DOM 요소에 어떤 행동을 했을 때 다양한 액션 행동들을 구현할 수 있습니다. 대표적인 예로, 버튼을 클릭했을 때 팝업창을 띄우는 행위 등이 있습니다. HTML DOM에 대해서 기본적인 이해가 필요합니다. DOM이란 Document Object Model의 약자로서, 웹페이지의 로드가 완료되면, 브라우저는 그 페이지의 Document Object Model를 생성하게 됩니다. 이 HTML DOM은 객체들의 트리로 구성되어지며 자바스크립트가 바로 이 DOM을 이용하여 HTML의 요소들을 생성, 변경, 삭제, 이벤트 생성 등 여러가지 제어를 할 수 있습니다. 

 

<button id="submitButton" onclick="executePopup()">팝업 실행</button>

<script>
	function executePopup() {
		alert("팝업이 실행되었습니다.");
	}
</script>

 

먼저 기본적인 형태의 클릭 이벤트를 구현해보았습니다. 자바스크립트로 excecutePopup 함수를 구현한 다음 (함수에 관해서는 추후에 자세히 다루겠습니다) button 태그에 onclick에 executePopup이라는 함수를 호출해줍니다. 버튼을 클릭하면 팝업이 실행되는 것을 확인하실 수 있습니다.

 

<button id="submitButton">팝업 실행</button>

<script>
	window.addEventListener("load", function() {
		document.querySelector("#submitButton").addEventListener("click", function() {
			alert("팝업이 실행되었습니다");
		});
	});
</script>

이번에는 자바스크립트로만 구현해본 모습으로 위의 예시와는 많이 다른 형태입니다. 먼저 window.addEventListener라는 코드가 필요한데 그 이유는 웹페이지가 다 로딩되기 전에 버튼 요소를 가져온다면 버튼이 아직 로딩되기 전이기 때문에, 버튼을 잡을 수 없다고 나옵니다. 즉 null 값이 나오게 됩니다. 그렇기 때문에 window.addEventListener("load") 로드 이벤트를 넣어주면 이것을 미연에 방지할 수 있습니다. 그 다음에 document.querySelector라는 것을 사용합니다. querySelector는 HTML DOM 요소를 선택할 때 사용되며 HTML에서 쓰이는 id값, class값 등 모든 요소를 선택할 수 있습니다. 저희가 가져오려는 값이 button id="submitButton"이므로 document.querySelector("#submitButton")이 됩니다. id에는 #을, class에는 .을 사용해서 가져오게 되기 때문에 만일 button class="submitButton"이었다면, document.querySelecotor(".submitButton")이 됩니다. 그리고 이 뒤에 나오는 click은 이벤트가 클릭이라는 알려주는 역할, 그리고 function() {}이 나오는데 이것을 콜백 (Callback) 함수라고 합니다. 콜백 함수는 쉽게 이야기하면 추후에 호출되는 함수로서, 함수로 미리 지정되어 있다가 앞의 부분 document.querySelector("#submitButton")이 클릭되면 그 때 호출되는 콜백 함수입니다. window.addEventListener("load", function()에서 function도 콜백 함수로 load가 완료될 때 호출됩니다. 이 개념을 이해하는 것이 상당히 중요합니다. 아래 이벤트들은 많이 사용되어지는 이벤트들 중 몇 개를 추려본 것으로 필요한 이벤트들을 잘 선택하셔서 사용하시면 됩니다. 감사합니다.

 

이벤트	용도	예시
click	클릭시	<button onclick="func()"></button>
change	변경시	<input type="text" onchange="func()">
mouseover	마우스 커서 올려둘 때	<div onmouseover="func()"></div>
keyup	키를 누르고 나서 뗐을 때	<input type="text" onkeyup="func()">
load	로딩 완료되었을 때	window.addEventListener("load", () => { alert("loading completed"); });
focus	클릭 등으로 초점을 두었을 때	<input type="text" onfocus="func()">