[Nomad coder/Momentom 클론코딩 2일차] JavaScript DOM과 Event(#2.0~#2.7)

강의에 대한 내용보다는, 강의에서 나온 내용 중 추가로 찾아보고 궁금했던 내용을 정리를 하려고 한다.

1. DOM(Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

- DOM은 웹 브라우저가 HTML을 인식하는 방식이다.
→ DOM은 HTML 문서에 대한 인터페이스이다.

1. JavaScript는 HTML에 있는 모든 요소를 Object(객체)로 만든다.

2. 모든 HTML은 Object가 된다.

3. Object는 많은 Property를 갖는다.

4. JavaScript를 통해 Object를 DOM 형태로 변경할 수 있다.

[index.html]

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
      <h1 id="title">Hello</h1>
      <script src="index.js"></script>
  </body>
</html>

[index.js]

const title = document.getElementById("title"); 
title.innerHTML = "Hello world"; // title의 내용이 바뀐다. 
title.style.color = "yellow"; // title의 color가 바뀐다. 

//JavaScript로 HTML 요소를 바꿀 수 있다.

2. event

JavaScript는 event에 반응하기 위해 만들어졌다.
- event는 click, resize, submit, input .....을 의미한다.

JavaScript는 이러한 event를 중간에 가로챌 수 있다.
→ target.addEventListener(type, listener[, options]);

type : 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열이다. (ex : "click" ...)

listener : 지정된 타입의 이벤트가 발생했을 때, 알림을 받는 객체이다. EventListener 인터페이스 또는 JavaScript function를 구현하는 객체여야 한다

type : 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열이다. (ex : "click" ...)
listener : 지정된 타입의 이벤트가 발생했을 때, 알림을 받는 객체이다. EventListener 인터페이스 또는 JavaScript function를 구현하는 객체여야 한다.

function handleResize(event){
    console.log(event);
}
window.addEventListener("resize", handleResize()); // handleResize 함수 자동 호출
window.addEventListener("resize", handleResize); // 원할 때 handleResize 호출

//event가 발생할때 handleResize() 함수를 실행시켜 event값 출력