[D+42] 문서객체 속성, 이벤트 처리

 

 

국비지원 D+42

-  문서객체 속성, 이벤트 처리 -

 

---

 

문서객체 속성

• 속성의 조작

- 객체.setAttribute() : 속성을 설정

- 객체.getAttribute() : 속성을 구함

 

• 글자 조작

- 객체.textContent : 입력된 문자열을 해석 없이 그대로 입력

- 객체.innerHTML : 입력된 문자열을 해석 하여 HTML형식으로 입력

 

• 스타일의 조작

- CSS에서 스타일 사용시 '-'를 사용할 수 있으나 자바스크립트에서는 사용할 수 없기 때문에 카멜스타일로 스타일을 처리해주어야 한다.

- h1.style['background-color'] 형태로 사용해 줄 수도 있다.

 

• 문서 객체의 생성 및 추가

- 문서객체의 생성 : document.createElement()

- 문서객체의 추가 : 객체.appendChild()

 

• 문서 객체의 제거

- 문서객체의 제거 : 부모객체.removeChild(자식객체)

 

---

이벤트 처리

• 이벤트의 개념

- Event : 어떤 조건이 만족 될 때 발생되는 신호

- Message : 이벤트의 값

- Event Handler : 이벤트 발생시 호출되는 함수를 event listener라고도 한다.

- 자바스크립트의 이벤트 처리 시스템은 Callback 함수를 통해 구현된다.

- 윈도우 시스템의 이벤트 처리 시스템과 거의 유사하다.

 

• 이벤트 처리 방식

- 표준방식 : addEventListener()

- 고전방식 : 태그를 이용

- 고전방식은 ES5에서 사용했던 방식을 말하며 현재는 표준방식을 주로 사용한다.

 

• Event.currentTarget

- 이벤트가 DOM을 통과할 때 이벤트의 현재 대상을 식별한다.

 

• 키보드 이벤트

- keydown : 키가 눌렸을 때

- keypress : 키가 입력되었을 때 (shift, Ctrl, Fn키 등 특수키 제외)

- keyup : 키가 떨어질 때

- event 객체에서 정보를 얻는다.

- 일반적으로 keyup에서 처리한다.

- keydown으로 처리시 한국어나 중국어의 경우 처리를 못하는 경우가 있음 (글자를 조합하기 때문에 이벤트를 처리 안할 수 있음)

 

• 키코드

- code : 입력한 키

- keyCode : 키의 실제값

- altKey, ctrlKey, shiftKey : 알트, 컨트롤, 시프트