1. DOM(Document Object Model)

Web에서 말하는 Document는?? → HTML
html(document)을 Object(객체)로 쓸 수 있게 하는 것
(html을 javascript가 이해할 수 있는 object라는 아이로 만들어준다.)

Node tree

다른말로 DOM은 노드node 트리인데,
html 태그들을 노드라고 인식/파악한다.
Element Nodes -> HTML의 태그들

2. event

DOM은 event와 관련있다.
event는 상황, 사건이 발생된 것(웹사이트에서 발생하는 모든 것들)
어떤1 버튼을 클릭했을 때는 이런 반응,
어떤2 버튼을 클릭했을때는 다른 반응 같은...
interaction이라고 부르는 것으로 자바스크립트를 이용한다.
상호작용 -> 사용자 반응에 따라 달라진다는 의미이다.

-> 사용자가 어떤 event동작을 함에 따라 다른 결과값을 주어야할 때 사용한다.
(각각 상황이 발생했을 때마다 다른 동작 하도록하는 것)

event handlring - addEventListener

여러가지 상황에 따라 handler를 만들어줘야한다.
이벤트를 달 때 사용하는 함수 이름 : addEventListener() = event콜백함수

1. 특정 요소에 addEventListener 함수를 붙인다.
2. 이벤트종류를 쓰고
3. function() { } 이벤트가 발생했을 때 실행할 내용을 써준다.

//addEventListener method pattern

elementDiv.addEventListner('click', function()
	{console.log('fire/trigger addEventListener')}, false);

elementDiv(요소)에게
'click',(이벤트종류)가 일어나면 f
unction() {console.log('fire/trigger addEventListener')}(실행할 내용)를 하겠다.
(요소에게 ~가 일어나면 ~하겠다)

event 종류

event 종류는 세부적으로 상세히 외울 필요가 없다.
매우 직관적인 네이밍 이기 때문

• mouse events(클릭이벤트) 종류
  click/mousedown/mouseenter/mouseleave/mouseup
  로그인 버튼 클릭 -> 로그인 API 호출
  상품 사진 클릭 -> 상품 상세화면으로 이동
  자세히 보기 버튼 클릭 -> 팝업 화면 출력

• keyboard events(키이벤트) 종류
  key down (특정 키보드를 눌렀을 때 상황 바뀌는 것)
  

• touch events 종류(모바일에서는 마우스가 없기 때문에)
  touchstart/touchend/touchmove/touchenter/touchleave

이벤트 종류는 쓰면서 mdn에 많이 찾아보자
검색 키워드 : DOM mouse event

3. DOM event flow

이벤트가 어떻게 작동하는지 알고있어야 한다. (이벤트 꼬일 경우를 대비해서 꼭 알아둬야함!)

이벤트의 진짜 주인 = currentTarget
이벤트의 시발점 = target

(여기부터 내용추가 더 자세히 정리할것)

참고한 사이트
kimbug
web developer tutorial