☁️ goormTIL | JavaScript #18

매루·2025년 9월 25일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

16/67

📅 2025-09-25

➡️ JavaScript 이벤트와 타이머에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

🔎 학습 리마인드

📌 이벤트 버블링

이벤트 전파 : 버블링 → 거품처럼 퍼지는 이벤트
```
<div onclick="alert('div 클릭!')">
  <button onclick="alert('button 클릭!')">클릭해보세요</button>
</div>
```
- 버튼을 클릭하면 "button 클릭!" → "div 클릭!" 순으로 두 개의 알림이 뜸

💡 이벤트 전파란?

HTML 요소들은 계층적으로 중첩되어 있음. 때문에 하나의 요소에서 이벤트가 발생하면, 그 이벤트가 다른 요소들로 전파되는 현상을 이벤트 전파라고 함

이벤트 전파 흐름은 3단계로 구분

1단계: 캡처링 (Capturing) → 위에서 아래로

2단계: 타깃 (Target) → 실제 클릭한 요소

3단계: 버블링 (Bubbling) → 아래에서 위로

💡 버블링이란?

물 속에서 거품이 아래에서 위로 올라가는 것처럼, 이벤트가 자식 요소에서 부모 요소로 전파되는 현상
```
<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>
```
- <p>클릭 시 실행 순서 : p → div → form 순으로 이벤트 발생

주요 메서드

event.stopPropagation()
- 상위로 전파만 차단 (같은 요소의 다른 핸들러는 여전히 실행)
event.stopImmediatePropagation()
- 같은 요소의 나머지 핸들러까지 모드 차단
event.preventDefault()
- 기본 동작만 막음

실습

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-color: gray;
                opacity: 0.8;
                /* 추가 */
                display: none;
                padding-top: 100px;
            }

            .modal-content {
                width: 200px;
                height: 200px;
                background-color: white;
                padding: 20px;
                margin: auto;
            }

            /* 추가 */
            .show {
                display: block;
            }
        </style>
    </head>

    <body>
        <div>본문</div>
        <button class="modal-btn">모달열기</button>
        <div class="modal">
            <div class="modal-content">
                <!-- <form> -->
                <input class="아이디" type="text" placeholder="아이디" />
                <input class="비밀번호" type="password" placeholder="비밀번호" />
                <button class="login">로그인하기</button>
                <button class="close-btn">닫기</button>
                <!-- </form> -->
            </div>
        </div>

        <script src="script2.js"></script>
    </body>
</html>

const modal = document.querySelector('.modal');
const modalBtn = document.querySelector('.modal-btn');
const closeBtn = document.querySelector('.close-btn');

const openModal = () => {
    modal.classList.toggle('show');
};

modalBtn.addEventListener('click', openModal);

closeBtn.addEventListener('click', openModal);

modal.addEventListener('click', (e) => {
    // console.log(e.target);
    // console.log(e.currentTarget);

    console.log('modal click');

    if (e.target === modal) {
        modal.classList.remove('show');
    }
});

📌 setTimeout / setInterval

자바스크립트는 싱글 쓰레드라서 한 번에 하나의 코드만 실행
그런데 UI 변화, 서버 요청, 타이머처럼 나중에 실행해야 할 작업이 많음
이럴 때 브라우저(Web API)가 대신 기다렸다가 콜백 함수를 실행시켜줌

💡 setTimeout

일정 시간이 지난 후 딱 한 번만 실행

기본 문법

setTimeout(실행할함수, 지연시간ms, ...추가인자);

실행할함수 : 지연시간 후 실행될 콜백 함수

지연시간ms : 밀리초(ms) 단위 (1000 = 1초)

setTimeout(() => {
  console.log("3초 뒤 실행!");
}, 3000);

💡 setInterval

일정 간격으로 반복 실행

기본 문법

setInterval(실행할함수, 간격ms, ...추가인자);

실행할함수 : 반복 실행될 콜백 함수

간격ms : 반복 주기 (밀리초)

setInterval(() => {
  console.log("1초마다 실행!");
}, 1000);

멈추기 (clear 함수)

setTimeout / setInterval은 id(숫자)를 반환
이 id를 clearTimeout / clearInterval에 넘기면 멈출 수 있음

const timerId = setInterval(() => {
  console.log("반복 중...");
}, 1000);

// 5초 후에 멈추기
setTimeout(() => {
  clearInterval(timerId);
  console.log("반복 종료");
}, 5000);