[JavaScript] DOM과 이벤트

이벤트

→ 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생.

자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 타입

→ 발생한 이벤트의 종류(폼, 키보드, 마우스, HTML DOM, Window 객체 등)

// 마우스 클릭 이벤트 예시
<p onclick="changeText(this)">여길 클릭하세요!</p>

<script>
function changeText(element) {
	element.innerHTML = "내용이 바뀌었습니다!";
}
</script>

이벤트 핸들러

→ 이벤트가 발생했을때 처리를 담당하는 함수

지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.

// 이 함수는 HTML 문서가 로드될 때 실행됨
window.onload = function() {
	
	// 아이디가 "text"인 요소를 선택함
	let text = document.getElementById("text")l

	text.innerHTML = "HTML 문서가 로드되었습니다.";
}

• 객체나 요소에 이벤트 핸들러를 등록하는 방법

  1. 자바스크립트 코드에서 프로퍼티로 등록하는 방법

     window.onload = function() {}

  2. HTML 태그에 속성으로 등록하는 방법

     <p onclick="this.innerText = '클릭'">클릭해 보세요!</p>