이벤트
- 웹 브라우저나 사용자가 행하는 동작
- 웹 문서 (DOM) 영역 안에서 발생하는 동작으로 한정
- 마우스, 키보드, 웹 문서 로딩 시, 폼 내용 작성,,,,
이벤트의 종류
-
마우스 이벤트
- onclick : HTML, 요소, 영역을 클릭할 때 발생
- ondbclick : 두 번 클릭할 때 발생
- onmouseover :
- onmouseout :
- onmousemove :
- onmousedown :
- onmouseup :
- onwheel :
-
키보드 이벤트
- onkeypress : 키를 누를 때
- onkeydown : 키를 누르는 동안
- onkeyup : 눌렀던 키가 올라올 때(손을 땔 때)
- 대부분 keyup/down 많이 씀
-
포커스 이벤트
- onfocus : 요소에 포커스(커서, 포인터)가 되면
- onblur : 요소가 포커스를 잃으면
-
폼 이벤트
- onsubmit : 폼 전송 될 때
- reset : 폼 요소 값 초기화
-
문서 관련 이벤트
- onload : 문서 로딩이 끝나면 발생
- resize : 문서 화면의 크기가 바뀌면 발생
- scrool : 화면이 스크롤되면 발생
- about : 문서가 완전히 로딩되기 전에 화면이 멈추면 발생
- error : 문서가 정확히 로딩되지 않고 에러가 발생할 경우
- unload : 문서에서 벗어날 때 발생
브라우저 객체 모델의 종류
-
window : 웹 브라우저가 열릴 때마다 생성되는 최상위 객체
- innerWidth : 웹 브라우저 화면 너비(px)
- innerHeight : 웹 브라우저 화면 높이(px)
- outerWidth : 웹 브라우저 창의 너비(px)
- outerHeight : 웹 브라우저 창의 높이(px)
- screenTop/screenY : 웹 브라우저 위쪽 면과 모니터의 간격
- screenLeft/screenX : 웹 브라우저 왼쪽 면과 모니터의 간격
- pageXOffset/scroolX : 웹 브라우저의 수평 스크롤 위치
- pageYOffset : 웹 브라우저의 수직 스크롤 위치
-
주요 메서드
- alert() : 알림창 표시
- confirm() : 확인창 표시
- prompt() : 입력창 표시
- open() : 새로운 웹 브라우저 창 열기
- close() : 웹 브라우저 닫기
- setTimeout() : 일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행
- setInterval() : 일정 시간(mns)마다 콜백 함수를 반복 실행
- clearInterval() : setInterval() 메서드를 반복 실행되는 함수를 중지
- scrollTo() : 웹 브라우저의 스크롤을 특정 위치로 이동
- scrollBy() : 웹 브라우저의 스크롤을 현재 위치에서 상대 위치로 이동
- document : 웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체 -> <html></html>
- location : 웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
- history : 웹 브라우저에 저장된 방문 기록이 포함된 객체
- navigator : 웹 브라우저(메뉴) 정보가 포함된 객체
- screen : 웹 브라우저의 화면 정보가 포함된 객체
문서 객체 모델 (DOM : Document Object Model)
-
DOM 트리
- 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것
- 자바스크립트가 이해할 수 있도록 객체화한 모델 구조
- 나무 형태로 표현되기 때문에 DOM 트리 라고 함
- 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목
- 루트 노드 (root node) : DOM 트리의 시작 부분
- 모든 HTML 태그는 요소(element) 노드
- 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text)노드
- 태그의 속성 : 요소 노드의 자식 노드인 속성(attribute)노드
- 주석 : 주석(comment) 노드
- attribute vs property
-
노드의 타입
- 문서 노드(Node.DOCUMENT_NODE) : 최상위 DOCUMENT 객체의 노드 타입
- 요소 노드(Node.ELEMENT_NODE) : 요소의 노드 타입 -> h1, p 태그 등등...
- 속성 노드(Node.ATTRIBUTE_NODE) : 속성의 노드 타입 -> href. src...
- 텍스트 노드(Node.TEXT_NODE) : 텍스트에 해당하는 노드 타입
- 주석 노드(Node.COMMENT_NODE) : 주석에 해당하는 노드 타입
-
DOM 요소에 접근 방법
-
getElementById("id이름") 메서드
- 형식 : 요소명.getElementById("id명")
-
getElementByClass() 메서드
- 형식 : 요소명.getElementByClass("class명")
-
getElementByName() 메서드
- 형식 : 요소명.getElementByName("태그명")
-
querySelector() 메서드
- 형식 : 요소명.querySelector("선택자")
-
querySelectorAll() 메서드
- 형식 : 요소명.querySelectorAll("선택자 또는 태그")
-
getElementById("id이름") 메서드
장래희망개발자