강의 영상 출처: 김버그 유튜브
JS에게 HTML이란, 문자열에 불과하다.
DOM이란, Document Object Model 을 말하고,
JS가 Document(HTML)을 이해할 수 있게 Object의 형태로 만든 것을 DOM이라고 한다.
JS를 사용하는 것은 HTML과 CSS의 스타일을 조작하기 위함이다.
그러기 위해서는 HTML과 CSS에서 내가 조작하고 싶은 것을 찾고 스타일과 속성을 바꾸기 위해서 method와 property를 사용하는데, 그것을 제공하는 것이 DOM이다.
HTML과 CSS는 우리가 보면서 작성 할 수 있지만, JS는 그럴 수 없다.
따라서 JS는 속성을 보고 작성한다. childnode, parentnode, lastchild 등등.
사용자에게 바뀐 UI를 보여주기 위해서는 html을 바꾸어야 하고 html을 바꾼다는 것은 DOM을 바꾸어야 한다는 의미를 가진다.
브라우저에는 많은 이벤트가 있는데, 많은 경우의 수에서 어떻게 각각의 이벤트를 처리할까?
함수로 연결시키는 것을 event handler = event listener = event 콜백함수 라고 한다.
누구에게 ~가 일어나면 ~하겠다. 는 로직으로 작성해주면 된다.
<aside> 💡 중요하다고 생각하는 이벤트 load, resize, scroll, blur, focus, change, submit, click, mousedown, mouseenter, mouseleave, mouseup, keydown, keyup, DOMContentLoaded
</aside>