기본 개념들

1. window 객체

자바스크립트 최상단 객체이며 브라우저 창을 대변합니다. 자바스크립트 코드 어느곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체(global object)라고 부릅니다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window. 을 생략할 수도 있습니다.

2. DOM

Document Object Model의 약자로 문서 객체 모델입니다. 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 편합니다. 이때 각 개체를 노드라는 용어로 표현하고 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다.

3. DOM 트리

HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 부릅니다. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현합니다.

4. DOM 이동 시 활용 가능한 프로퍼티

5. 주요 요소 노드 프로퍼티

6. 요소 노드 다루기

1. 요소 노드 만들기 : document.createElement(’태그이름’)
2. 요소 노드 꾸미기 : element.textContent, element.innerHTML, …
3. 요소 노드 추가 혹은 이동하기 : element.prepend, element.append, element.after, element.before …
4. 요소 노드 삭제하기 : element.remove()

7. HTML 속성 다루기

대부분의 HTML 속성은 DOM 객체의 프로퍼티로 변환이 됩니다.

비표준 속성인 경우에는 프로퍼티로 변환이 안 되는데요. 아래 메소드를 활용하면 표준이 아닌 HTML 속성들도 다룰 수 있습니다.

1. 속성에 접근하기 : element.getAttribute(’속성’)
2. 속성 추가하기 : element.setAttribute(’속성’, ‘값’)
3. 속성 제거하기 : element.removeAttribute(’속성’)

8. 스타일 다루기

자바스크립트로 태그의 스타일을 다루는 방법에는 크게 두 가지가 있습니다.

1. stlye 프로퍼티 활용하기 : element.style.styleName = ‘value’;
2. class 변경을 통해 간접적으로 스타일 적용하기 : element.className = ‘value’, element.classList.add(’value’);

2-1.

이벤트 핸들러

1. 마우스 이벤트

2. 키보드 이벤트

3. 포커스 이벤트

4. 입력 이벤트

5. 스크롤 이벤트

6. 윈도우 창 이벤트

이벤트 객체

웹 페이지에서 일어날 수 있는 이벤트는 대부분 키보드 이벤트와 마우스 이벤트로 이루어 집니다.

1️. keydown

2️. click

1
const myInput = document.querySelector('#myInput');
2
const myBtn = document.querySelector('#myBtn');
3

4
myInput.addEventListener('keydown', function() {
5
  console.log('KeyboardEvent');
6
}
7

8
myBtn.addEventListener('click', function() {
9
  console.log('MouseEvent');
10
}

위와 같이 코드를 작성하여 웹 브라우저에서 각 이벤트를 발생시켜 보자

키보드를 입력했을 땐 콘솔창에 키보드이벤트가

버튼을 마우스로 클릭했을땐 콘솔창에 마우스이벤트가 출력됩니다.

❕ 이때 일어나는 이벤트를 제어하기 위해선 이벤트에 관한 자세한 정보가 필요합니다.

키를 눌렀다면 어떤 키를 눌렀는지, 마우스를 눌렀다면 화면에 어디를 눌렀는지 또 왼쪽 버튼인지 오른쪽 버튼인지 등..

1
function printEvent(event) {
2
  console.log(event);
3
}
4

5
myInput.addEventListener("keydown", printEvent);
6
myBtn.addEventListener("click", printEvent);

위와 같은 코드를 작성하고 키보드와 마우스를 클릭하여 이벤트를 실행하면 콘솔에 다음과 같은 프로퍼티를 가진 이벤트 객체가 출력된다.

다양한 이벤트 프로퍼티가 보인다.

주로 쓰이는건 target과 type등이 있다.

1. 공통 프로퍼티

다음은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티 입니다.

2. 마우스 이벤트

3. 키보드 이벤트

이벤트 버블링

👉 이벤트는 전파가 됩니다.

어떤 요소에서 이벤트가 발생하면 해당 요소의 부모 요소로 전파가 되고 최상단인 window를 만날때까지 반복 합니다.

이를 이벤트 버블링(event bubbling) 이라고 부릅니다.

이러한 동작을 event.stopPropagation 로 막을 수 있습니다.

이벤트 위임

👉 버블링의 개념을 활용하면 훨씬 효과적인 이벤트 관리가 가능합니다. 자식 요소 각각에 일일이 핸들러를 등록할 필요없이 부모 요소 하나에만 등록해도 자식 요소 모두에게 이벤트를 등록할 수 있습니다.

이렇게 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다 하여 이벤트 위임 (event delegation) 이라고 부릅니다.

마우스 이벤트

👉 마우스 이벤트에서 자주 사용되는 이벤트 객체의 3가지 프로퍼티에 대해서 알아봅시다.

1. clientX, clientY

브라우저 영역 안에서의 위치를 말합니다. 스크롤 해도 좌표값은 변하지 않는 특징이 있겠죠.

2. offsetX, offsetY

이벤트가 발생한 요소를 기준으로 한 위치를 말합니다. 어떤 요소에 이벤트를 걸었다면 그 요소의 영역 내부에서만 작동되는 프로퍼티라고 보면 되겠죠.

3. pageX, pageY

해당 페이지의 전체 영역을 모두 포함한 위치를 말합니다. 스크롤 여부와 관계없이 해당 문서 전체의 절대 위치 값과 같은 개념입니다.

키보드 이벤트

1️⃣ KeyboardEvent.type

2️⃣ key 와 code 의 차이

👉 키보드 이벤트 객체에는 key 와 code 라는 프로퍼티가 있습니다.

key 는 사용자가 누른 키가 가진 값 자체를 이야기 합니다.

code 는 사용자가 누른 키의 물리적인 위치를 이야기 합니다.

input태그 다루기

input 태그를 다룰 때 사용되는 이벤트 타입들 입니다.

스크롤 이벤트

스크롤 이벤트는 브라우저를 대변하는 window 객체에 등록하는 경우가 일반적 입니다. window 객체 안에 다양한 프로퍼티를 활용하면 웬만한 스크롤 이벤트는 구현이 가능합니다.

👉 scrollY, scrollX 등의 프로퍼티를 이용해 현재 스크롤 된 좌표 값에 접근할 수 있습니다.