[JavaScript] DOM & Event

Jnary·2024년 4월 25일

BOM DOM DOM API Event Event Handler Event Property Event Queue Evnet Loop JavaScript Web API call stack event bubbling event capturing event delegation heap task queue

Web Application

목록 보기

13/14

DOM

Document Object Model
HTML을 객체 형태로 파싱하여 구조화한 모델
HTML에 접근하기 위한 인터페이스
계층적 단위로 정보 저장, Node tree

DOM API

웹 문서의 동적 변경을 위해 프로그래밍 언어가 DOM에 접근하고 수정할 수 있는 방법 제공
DOM 접근 및 수정 : 비용 ⬆️
HTML 요소 선택 document.getElementById() document.querySelectorAll()
HTML 요소 생성 document.createElement()
HTML 자식 요소 추가 document.appendChild()
…

BOM

Browser Object Model
자바스크립트 이용하여 브라우저의 정보에 접근하거나
브라우저의 여러 기능을 제어하기 위해 사용하는 객체 모델
ex. 브라우저의 새 창 열기, 다른 문서로 이동하기
window 객체
- 웹 브라우저의 창을 나타내는 객체
- 하위 객체 : location navigator screen history

document	window
웹페이지 전체	브라우저 전체
문서	프로그램

Event

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
Event 종류 : UI, Keyboard, Mouse, Focus, Form, Clipboard
Event reference | MDN

Event 루프와 동시성

JavaScript : single-thread 언어
- 한 번에 하나의 작업만 수행
- JavaScript의 동시성 지원 : Event Loop
JavaScript 엔진
1. Call Stack
  - 요청된 작업 순차적으로 push
  - 순차적으로 실행 pop
  - 단 하나의 Call Stack 사용 → 해당 task 종료 전까지 다른 task 수행 X
  - Queue가 아니라 Stack 인 이유
    - 함수 호출과 실행 컨텍스트 관리에 있어 Stack이 적합
    - 프로그램의 함수 호출 순서와 스코프 관리에 필수적
    - Queue: 함수 호출의 순서, 중첩된 함수 호출 관리에 적합 X
2. Heap
  - 객체가 저장되는 메모리 공간
  - Call Stack의 요소인 실행 컨텍스트가 Heap에 저장된 객체를 참조해 값을 가져옴
Event Queue (Task Queue)
- 비동기 처리 함수의 콜백함수, 비동기식 이벤트 핸들러, Timer 함수 (setTimeout() setInterval() )의 콜백 함수가 보관되는 영역
- 비동기 결과를 처리하기 위한 대기열
- Call Stack이 비어졌을 때 순차적으로 Call Stack으로 이동되어 실행
Web API
- 브라우저에서 제공하는 API 모음
- 비동기적으로 실행되는 작업들을 전담하여 처리
- DOM API, Timer function, HTTP request
- 브라우저 내부의 multi-thread
동작 방식
1. JavaScript의 비동기 JS코드를 브라우저 Web APIs에게 맡김
2. 작업 끝난 결과를 콜백 함수 형태로 Event Queue에 push
3. Call Stack 비어있고, Event Queue의 작업 처리 준비 완료
  
  → Event Queue에서 pop해서 Call Stack에 push
Event Loop 의 반복적 확인
1. Call Stack 내에 실행 중인 task 존재 여부
2. Event Queue 내에 task 존재 여부

Event Handler 등록

이벤트가 발생하면 실행되는 함수

addEventListenr
- 특정한 이벤트가 발생함을 감지 → 핸들러 실행
```
element.addEventListener(event, handler, options);
```
- event 이벤트 이름
- handler 핸들러 함수 (호출 형태X, 함수명 자체)
- options true : capturing / false : bubbling(default)
이벤트 핸들러 프로퍼티 방식 onclick
```
element.onclick = function (e) { ... }
```
- 단점
  - 하나의 이벤트 핸들러만 바인딩 가능
  - addEventListener보다 먼저 실행

[JavaScript] onclick vs. addEventListener(’click’)

Event Object

핸들러에 인수형태로 전달
Event Property
- type : 이벤트 타입 (ex. “click”)
- target : 실제로 이벤트를 발생시킨 요소 (ex. 클릭이벤트가 발생한 요소)
- currentTarget : 발생 요소에서 상위로 올라가며 찾은 이벤트 핸들러가 등록된 요소
- clientX / clientY : 포인터 관련 이벤트에서 커서의 상대 좌표 → 모니터 기준 X, 브라우저 화면 기준 O

기본 동작의 변경

e.preventDefault()
- 이벤트의 기본 동작 중단
- 기본동작 ex. 링크 클릭시 해당 URL로 이동
e.stopPropagation()
- 이벤트가 상위 요소로 전파되지 않도록 중단
Event Bubbling
- 특정 요소에서 이벤트 발생 시, 상위 요소로 전파
- 최상위 요소까지 버블링
- Listener가 부착된 요소에서 이벤트 발생 감지
Event Capturing
- 버블링과 반대방향으로 전파
- addEvenetListener의 option = true

이벤트 위임 (delegation)

하위 요소에 각각 event를 붙이지 않고 상위 요소에서 하위 요소의 이벤트를 제어하는 것

합리적인 메모리 사용, 메모리 누수 방지

document.getElementById("file").addEventListener("click", function(e) {
  // 파일 메뉴 동작
});
document.getElementById("edit").addEventListener("click", function(e) {
  // 편집 메뉴 동작
});
document.getElementById("view").addEventListener("click", function(e) {
  // 보기 메뉴 동작
});

// 바람직
document.getElementById("menu").addEventListener("click", function(e) {
  var target = e.target;
  if (target.id === "file") {
    // 파일 메뉴 동작
  } else if (target.id === "edit") {
    // 편집 메뉴 동작
  } else if (target.id === "view") {
    // 보기 메뉴 동작
  }
});