코딩자율학습단 19기 | 18일차 학습일지 – 폼 요소 값 다루기, 이벤트 등록/객체(this)

오늘 학습 정보

• 날짜/Day: 2026/02/04 (Day18)
• 교재 범위: ~ 12.7. DOM 이벤트 객체와 THIS (p.487~p.522)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 폼 요소 값/상태 다루기(value, checked, selected, files)
• 핵심 키워드 2: 이벤트 등록(addEventListener, 이벤트 객체)
• 핵심 키워드 3: this와 기본 이벤트 취소(preventDefault, e.target)

개념 정리

2-1) 폼 요소 값/상태 다루기

역할: 핵심 포인트 → 짧은 예시(코드)

(1) 텍스트 입력 값 가져오기/설정하기

역할: input에 입력된 값을 읽거나 바꾸기

핵심 포인트: value 속성으로 접근/대입

짧은 예시(코드):

<input type="text" id="age" name="age">
<script>
   const ageEl = document.querySelector("#age");
   console.log(ageEl.value); // 가져오기
   ageEl.value = "20"; // 설정하기
</script>

(2) 체크박스/라디오 선택 상태 제어하기

역할: 체크/선택 상태 확인 및 기본 선택 지정

핵심 포인트: checked 속성으로 true/false

<input type="radio" name="fruit" value="apple">사과
<input type="radio" name="fruit" value="banana">바나나
<script>
  const radioEls = document.querySelectorAll('[type="radio"]');
  for (let i = 0; i < radioEls.length; i++) {
    if (radioEls[i].value === "banana") {
      radioEls[i].checked = true;
    }
  }
</script>

(3) 콤보박스(select) 선택 상태 확인/지정

역할: option의 선택 항목 확인 및 기본 선택 처리

핵심 포인트: option의 selected가 true인 항목이 현재 선택

짧은 예시(코드):

<select>
   <option value="apple">사과</option>
   <option value="banana">바나나</option>
   <option value="orange">오렌지</option>
</select>

<script>
   const optionEls = document.querySelectorAll("option");

  // 현재 선택된 값 출력
  for (let i = 0; i < optionEls.length; i++) {
    if (optionEls[i].selected === true) {
      console.log(optionEls[i].value);
    }
  }
​
  // 원하는 항목 선택 상태로 만들기
  for (let i = 0; i < optionEls.length; i++) {
    if (optionEls[i].value === "banana") {
      optionEls[i].selected = true;
    }
  }
</script>

(4) 파일 업로드(input type=”file”) 값 다루기

역할: 사용자가 선택한 파일 정보 가져오기

핵심 포인트: files는 FileList 객체(배열처럼 인덱스 접근)

짧은 예시(코드):

<form name="frm">
   <input type="file" name="upload">
</form>

<script>
   const files = document.frm.upload.files; // FileList
   console.log(files);

   console.log(files[0].name); // 파일 이름
   console.log(files[0].size); // 파일 크기
   console.log(files[0].type); // 파일 타입
   console.log(files[0].lastModifiedDate); // 마지막 수정일
</script>

2-2) 이벤트 등록 방식 & 주요 이벤트

역할: 핵심 포인트 → 짧은 예시(코드)

(1) 인라인 방식(HTML 속성으로 등록)

역할: 태그 속성에 이벤트와 실행 함수를 직접 연결

핵심 포인트: onclick=”함수()” 형태

짧은 예시(코드):

<button onclick="clickEvent()">클릭</button>
<script>
   function clickEvent() {
      alert("click");
   }
</script>

(2) 프로퍼티 리스너 방식(요소.이벤트 = 함수)

역할: 요소 노드의 이벤트 프로퍼티에 함수를 할당

핵심 포인트: btn.onclick = function(){…}

짧은 예시(코드):

<button>클릭</button>
<script>
   const btnEl = document.querySelector("button");
   btnEl.onclick = function () {
   alert("click");
};
</script>

(3) addEventListener 방식(권장)

역할: 이벤트 타입과 이벤트 함수를 분리해서 등록

핵심 포인트: <노드>.addEventListener("이벤트", 함수)

짧은 예시(코드):

<button>클릭</button>
<script>
   const btnEl = document.querySelector("button");
   btnEl.addEventListener("click", function () {
      alert("button click");
   });
</script>

(4) 주요 이벤트

• 마우스: onclick, ondblclick, onmouseover, onmouseout, onmousemove, onwheel
• 키보드: onkeypress, onkeydown, onkeyup
• 포커스: onfocus, onblur
• 폼: onsubmit
• 리소스: onload

2-3) 이벤트 객체 & this (그리고 화살표 함수 주의점)

(1) 이벤트 객체(event)의 역할

역할: 이벤트 발생 순간의 정보 묶음(좌표, 키 입력 등)

핵심 포인트: 이벤트 핸들러의 매개변수로 전달됨

짧은 예시(코드):

btnEl.addEventListener("click", function (event) {
   console.log(event);
});

(2) PointerEvent에서 유용한 속성(클릭 좌표)

핵심 포인트:

• clientX/Y: 화면(브라우저 뷰포트) 기준 좌표(스크롤 제외)
• pageX/Y: 문서 기준 좌표(스크롤 포함)
• screenX/Y: 모니터 기준 좌표

짧은 예시(코드):

btnEl.addEventListener("click", function (event) {
   console.log(event.clientX, event.clientY);
   console.log(event.pageX, event.pageY);
   console.log(event.screenX, event.screenY);
});

(3) this 키워드의 역할

역할: “이벤트가 발생한 요소 노드”를 가리키게 해서 간편 조작

핵심 포인트: 일반 함수(function)로 등록했을 때 유효

짧은 예시(코드):

<p>text-1</p>
<p>text-2</p>
<p>text-3</p>
<script>
   const pEls = document.querySelectorAll("p");
   pEls.forEach((el) => {
      el.addEventListener("click", function () {
         if (this.style.color === "red") this.style.color = "black";
         else this.style.color = "red";
      });
   });
</script>

(4) 화살표 함수에서는 this가 달라짐 → e.target 사용

핵심 포인트: 화살표 함수의 this는 이벤트 요소가 아니라(교재 예시 기준) window 쪽으로 잡힐 수 있음 → 이때 는 e.target 사용

짧은 예시(코드):

const pEls = document.querySelectorAll("p");
pEls.forEach((el) => {
   el.addEventListener("click", (e) => {
      console.log(e.target); // 실제 이벤트 발생 요소
   });
});

2-4) 기본 이벤트 취소(preventDefault)

기본 이벤트 취소하기

역할: a 태그 이동, form 제출처럼 “원래 동작”을 막기

핵심 포인트: 이벤트 객체의 preventDefault() 호출

짧은 예시(코드):

<a href="https://www.naver.com">네이버 이동</a>
<script>
   const aEl = document.querySelector("a");
   aEl.addEventListener("click", function (e) {
      e.preventDefault(); // 기본 이동 취소
   });
</script>

이슈 로그

• this를 화살표 함수에서 그대로 쓰면 이벤트 요소가 아니라 다른 값(window 등)으로 잡힐 수 있다는 점이 헷갈 렸습니다. → 이벤트 타깃이 필요하면 e.target로 처리하는 흐름으로 정리해두습니다.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」