프로그래밍 공부

2024.12.26 JS공부

3452 2024. 12. 26. 15:15

Event

 

js 사용의 궁극적인 목적은 동적 웹 페이지의 작성이다. 따라서 사용자의 웹 페이지의 HTML 요소를 클릭하거나 마우스를 이동하는 등의 경우 이벤트가 발생하며, 이벤트가 발생하면 그에 반응하는 과정을 js에 의해 처리할 수 있다.

 

Event가 발생하는 경우

 

1. 웹 페이지가 로드되었을 때

2. 사용자가 마우스를 클릭하거나 요소 위에 두거나, 위에서 움직일때

3. 이미지가 로드되었을 때

4. 입력 필드가 변경되었을 때

5. HTML 양식이 제출되었을 때

6. 키보드를 사용할 때

 

 

EventListener

 

이벤트의 호출은 HTML 에서, 정의는 js에서 사용할 수 있다. 또한 js의 EventListener를 이용하기도 한다.

 

HTML에서 <element onclick = "myScript">
js에서 object.onclick = function() {myScript};
EventListener에서 object.addEventListener("click", myScript)

셋 모두 클릭되었을때 "myScript"를 실행하도록 구성되어있다.

 

 

addEvenetListener()

 

기존의 이벤트 처리기를 덮어 쓰지 않고, 요소에 이벤트 처리기를 연결한다. addEvenetListener() 메서드를 사용 할 때 js는 HTML 마크업과 분리되어 가독성을 높이고, HTML 마크업을 제어하지 않아도 EvenetListener를 추가할 수 있다.

 

element.addEventListener(event, function, useCapure); // event, function, useCapure는 각각 매개 변수이다.

 

 

마우스 이벤트

마우스 이벤트 설명
click 마우스를 클릭할 때 이벤트 발생
dbclick 마우스를 더블클릭할 때 이벤트 발생
mouseover (mouseenter) 마우스를 오버했을 때 이벤트 발생
mouseout (mouseleave) 마우스를 아웃했을 때 이벤트 발생
mousedown 마우스를 눌렀을 때 이벤트 발생
mouseup 마우스를 뗐을 때 이벤트 발생
mousemove 마우스를 움직였을 때 이벤트 발생

 

 

키 이벤트

키 이벤트 설명
keydown 키를 눌렀을 때 이벤트 발생
keyup 키를 뗐을 때 이벤트 발생
keypress 문자 키를 누른 상태에서 이벤트 발생 (연속적)

 

 

폼 이벤트

폼 이벤트 설명
focus 포커스가 이동되었을 때 이벤트 발생
blur 포커스가 벗어났을 때 이벤트 발생
change 값이 변경되었을 때 이벤트 발생
submit submit 버튼을 눌렀을  때 이벤트 발생
reset reset 버튼을 눌렀을 때 이벤트 발생
select input이나 textarea 요소 안의 텍스트를 드래그하여 선택하여 이벤트가 발생

 

 

로드 / 기타 이벤트

로드 / 기타 이벤트 설명
load (DOMContentLoaded) 로딩이 완료되었을 때 이벤트 발생
abort 이미지의 로딩이 중단되었을 때 이벤트 발생
resize 사이즈가 변경되었을 때 이벤트 발생
scroll 스크롤바를 움직였을 때 이벤트 발생

 

위와 같은 경우에서 이벤트가 발생한다.

 

 

removeEventListener()

 

addEventListner() 메서드로 첨부된 이벤트 핸들러를 제거한다.

 

document.querySelector('선택자').removeEventListener('이벤트', 함수이름);

 

 

 

HTML DOM 요소

 

HTML DOM 노드 관계를 사용하여 노드 트리를 탐색할 수 있고, HTML DOM에 새 요소를 추가하거나 삭제할 수 있다. W3C HTML 표준에 따르면 HTML 문서의 모든 것이 노드이다.

 

1. 전체 문서가 문서 노드이다.

2. 모든 HTML 요소는 요소 노드이다.

3. HTML 요소 안의 텍스트는 텍스트 노드이다.

4. 모든 HTML 속성은 속성 노드이다.

5. 모든 주석은 주석 노드이다.

 

 

DOM 노드

 

1. 노드 트리에서 최상위 노드를 루트라고 한다.

2. 모든 노드에는 루트(부모가 없음)를 제외하고 정확히 하나의 부모 노드가 있다.

3. 노드에는 여러 자식 노드가 있을 수 있다.

4. 형제 또는 자매 노드는 같은 부모 노드를 가진 노드들이다.

 

 

DOM 노드 탐색

노드 탐색 설명
parentNode 현재 노드의 부모 노드를 찾는다.
childNodes[nodenumber]
children[elementnumber]		 자식노드를 모두 탐색하여 nodenumber로 접근
자식 요소 노드를 모두 탐색하여 number로 접근
firstChild
firstElementChild		 첫번째 자식 노드 반환
첫번째 자식 요소 노드 반환
lastChild
lastElementChild		 마지막 자식 노드 반환
마지막 자식 요소 노드 반환
nextSibling
nextElementSibling		 자신의 다음 형제 노드 반환
자신의 다음 형제 요소 노드 반환
previousSibling
previousElementSibling		 자신의 이전 형제 노드 반환
자신의 이전 형제 요소 노드 반환

 

 

nodeValue

 

노드 탐색을 위해 노드와 노드값에 대한 이해가 필요하다.

 

<title id="demo">DOM tutorial</title>

 

요소 노드 <title>은 텍스트를 포함하지 않는다. 대신 텍스트 노드에 "DOM turorial" 값이 들어있다.

innerHTML 속성은 요소의 콘텐츠를 다룰 때 사용하며, nodeValue는 텍스트 노드의 값(텍스트)를 다룰 때 사용한다.

nodeValue 속성은 텍스트 노드의 텍스트를 반환하므로 문서 노드나 요소 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다.

 

 

textContent

 

요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경한다.

(시작 태그와 종료 태그 사이의 모든 텍스트)

 

 

Root 노드

 

문서 본문 : document.body (head 제외)

문서 전체 : document.documentElement (head 포함 전체)

 

 

nodeName 속성

 

nodeName은 읽기 전용으로, 요소 노드의 nodeName은 태그 이름과 같고, 속성 노드의 nodeName은 속성 이름이고, 텍스트 노드의 nodeName은 항상 #text이며, 문서 노드의 nodeName은 항상 #document이다.

 

 

HTML 요소 추가

 

메서드 설명
document.createElement (요소) HTML 요소 생성
document.createTextNode(콘텐츠) HTML 텍스트 추가
document.appendChild (요소) HTML 요소 추가
document.insertBefore (요소) HTML 요소 추가

 

 

HTML 요소 삭제

 

메서드 설명
document.removeChild(요소) 자식노드 중 해당하는 요소 제거
(요소 노드, 텍스트 노드 가능)
element.textContent = "" 해당 요소의 텍스트 노드 삭제

 

 

HTML 요소 변경

 

메서드 설명
document.replaceChild(새로운 내용, 기존 내용) 자식 노드 수정하기
(요소 노드, 텍스트 노드 가능)
element.textContent 해당 요소의 텍스트 노드 수정