Event

사용자의 행위 혹은 코드로 인해 브라우저에 어떤 행위가 발생했을 때 브라우저에서 이벤트를 발생시키고 이벤트 타이밍에 어떤 행위에 대한 함수를 등록할 수 있음

→ HTML 요소에 이벤트가 발생했을 때 해당 HTML 요소를 DOM으로 가져와 해당 이벤트에 함수를 등록

Event handler 등록 방법

1. HTML 요소의 속성으로 등록

   <button type="button" onclick="clickEvent()"></button>

2. DOM 요소의 Property로 등록

• window.onload는 브라우저가 HTML 문서를 다 읽었을 때 호출될 함수를 저장한 property

  window.onload = function() {
  	let button = document.getElementById("button");
  	button.onclick = func;
  }

3. addEventListener로 등록

• listener는 인수로 이벤트 객체를 받을 수 있고, 이벤트 객체 안에는 발생한 이벤트에 대한 정보가 있음
• 하나의 이벤트에 여러 핸들러를 등록할 수 있음

  target.addEventListener(type, listner(e), useCapture);

Event 객체

특정 타입의 이벤트와 관련이 있는 객체로 이벤트의 타입을 나타내는 type property와 이벤트 대상을 나타내는 target property를 가짐

• 이벤트 리스너가 호출될 때 인수로 전달

Event Propagation

브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정

1. bubbling

• 이벤트가 발생한 요소부터 DOM 트리를 따라 위쪽으로 올라가며 전파
• 해당 요소의 리스너가 실행되고 그 부모 요소에 등록된 리스너가 실행
• 마지막 window 객체까지 이어짐

2. capturing

• 이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가며 전파
• window 객체의 리스너가 실행된 후 document 리스너, 그 자식 요소의 리스너가 실행되며 이벤트가 발생한 요소까지 전파

이벤트 중단

• e.preventDefault로 기본 이벤트 중지
• stopPropagation으로 이벤트 전파 중단

이벤트 중복

click, mousedown 등 이벤트가 중복으로 일어나는 경우 어떻게 처리할 수 있을까

1. flag 사용

• isClicked와 같은 flag를 사용해 이미 클릭된 경우를 제어
• 전역 변수를 사용하는 경우 변경될 문제

2. handler 삭제

document.getElementById('button').onclick = null 

• 재사용이 불가

3. disabled

document.getElementById('button').setAttribute('disabled', 'true')

• 재사용이 불가

DOM

Document Object Model은 HTML, XML 문서의 프로그래밍 인터페이스

• HTML 바탕으로 DOM을 생성하며 다른 프로그래밍 언어에서 HTML을 제어할 수 있게 함 (주로 JS)

DOM Tree

브라우저가 HTML 구조에 따라 DOM을 트리 구조로 생성

• Element 하나 당 생성된 객체 단위가 node

DOM Control

Selector

Javascript에서는 node를 가져와서 제어할 수 있음

• querySelector : 태그, 클래스, id에 따라서 node를 가져옴
• querySelectorAll : 태그, 클래스, id에 따라 NodeList를 가져옴
• getElementById : id로 node를 가져옴
• getElementByClassName : 클래스 명으로 node를 가져옴

querySelector는 index번호로만 접근하고 getElementBy는 name, id, index로 접근하기 때문에 querySelector가 비교적 느림

Control

DOM 조작

• createElement : 새로운 Node 생성
• setAttribute : Node에 속성 추가
• appendChild : Node를 자식 요소로 추가
• removeChild : Node의 자식 요소 삭제

정보 가져오기

• tagName : 태그명
• classList : 어떤 클래스를 가지는지

DOM 탐색

• childNodes : 자식 요소 탐색
• parentElement : 부모 요소 탐색

참고자료

https://developer.mozilla.org/en-US/docs/Web/Events
http://www.tcpschool.com/javascript/js_event_eventListenerCall
https://ko.javascript.info/dom-nodes