2025-11-10(javascript - final)

이벤트 (Event)

개념

• 이벤트란 웹페이지에서 사용자나 시스템이 일으키는 행동이나 자극을 의미한다.
• 즉, "사용자와 상호작용"을 가능하게 하는 핵심 요소
• -> 마우스 클릭, 키보드 입력, 스크롤, 창 크기 조정 

이벤트 종류

구분예시설명

마우스 이벤트	click, mouseover, mouseout	마우스 클릭이나 이동 관련
키보드 이벤트	keydown, keyup	키보드 눌림 / 떼어짐
폼 이벤트	change, submit, focus, blur	입력창, 폼 관련 동작
윈도우 이벤트	load, resize, scroll	브라우저 창 관련 동작

이벤트 핸들러 (Event Handler)

이벤트가 발생했을 때 실행되는 함수

<p id="text" style="cursor:pointer;" onclick="changeColor()">테스트 클릭</p>

• onclick="changeColor()"
• -> id가 "text"인 요소를 클릭하면 changeColor() 함수가 실행시킴.

등록 방법 3가지

HTML 속성에 직접 연결

<button onclick="alert('클릭!')">클릭</button>

자바스크립트 표현식으로 등록

document.getElementById("btn").onclick = () => alert("클릭됨");

표준 방식(addEventListner)

element.addEventListener("click",function(event){
	console.log("클릭 이벤트 발생");
    });

• 표준 방식이며, 여러개의 이벤트를 동시에 연결할 수 있음.
• 함수가 호출될 때 event 객체가 자동으로 전달됨.
• event.preventDefault() : 기본 동작  차단
• event.stopPropagation : 부모로의 이벤트 전파 중지

이벤트 동작(흐름)

이벤트는 “위 → 아래 → 위” 로 이동하는 흐름이 있다.

1. 이벤트 캡처링(Capturing)    : 상위 요소에서 타깃 요소로 내려감
2. 타깃 단계(Target) : 실제 이벤트 발생한 요소에 도달
3. 이벤트 버블링 : 타깃에서 다시 상위 요소로 올라감 

이벤트가 부모 요소까지 전달 될 때,

event.stopPropagation()

으로 버블리으로 막는다

• preventDefault() -> 기본 동작 차단( 예 : <a> 링크 이동 방지)
• stopPropagation() -> 부모로의 이벤트 전파 중단
• addEventListner() -> 표준 이벤트 등록 방식

DOM (Document Object Model)

개념 

•  HTML 문서를 자바스크립트에서 제어하기 위한 객체 모델
• HTML의 구조를 트리 형태로 변환
• DOM을 통해 HTML 요소를 탐색, 추가,수정, 삭제 할 수 있음

 

브라우저 구성 요소 $ 실행 흐름

 

사용자 인터페이스             주소창,탭 등 사용자 화면

브라우저 엔지                     UI와 렌더링 엔진 사이에서 동작 조율

렌더링 엔진                          HTML/CSS 파싱 -> DOM 트리 생성 -> 화면에 표시

통신                                HTTP 요청/ 응답 처리

자바스크립트 엔진                    JS 코드 해석 및 실행

자료 저장소                            쿠키, localStorage등 클라이언트 데이터 저장

 

DOM API로 제어할 수 있는 작업 

 

요소 선택                    HTML 요소 찾기 (getElementById, querySelector)

내용 변경                   innerText, innerHTML 등으로 텍스트 수정

스타일 변경               element.style.color = "red"

요소를 추가/삭제         appendChild(), removeChild()

이벤트 처리                 addEventListener() 등으로 이벤트 연결

 

요소 선택 방법

                       

메서드설명반환값

getElementById("id")	id로 1개 선택	단일 요소
getElementsByTagName("p")	태그명으로 선택	HTMLCollection
getElementsByClassName("class")	클래스명으로 선택	HTMLCollection
querySelector(".class")	CSS 선택자 1개	단일 요소
querySelectorAll("div")	CSS 선택자 전체	NodeList

 

요소 추가하기

요소 생성 

const div = document.createElement("div");

속성 추가

div.setAttribute("class","box");

텍스트 노드 추가

const text = document.createTextNode("Hello DOM!")'
div.appendChild(text);

부모 노드에 추가

document.body.appendChild(div);

요소 삭제

parentNode.removeChild(childNode);

기능사용 메서드

요소 생성	createElement()
속성 추가	setAttribute() / getAttribute()
텍스트 생성	createTextNode()
부모에 추가	appendChild()
삭제	removeChild()