[TIL]JavaScript 이벤트와 비동기 프로그래밍, BOM

1. 이벤트(Event) 개요

이벤트는 사용자의 행동(클릭, 키 입력 등)이나 브라우저의 동작에 반응하여 특정 코드를 실행하는 메커니즘이다. 자바스크립트는 이벤트 기반(Event-Driven) 언어로, 웹 페이지의 상호작용을 구현하는 핵심 요소이다.

---

2. 이벤트 핸들러 등록 방법

2.1 이벤트 핸들러 어트리뷰트 방식 (구식)

HTML 태그에 onclick과 같은 속성을 직접 작성하는 방식이다.

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

• HTML과 JavaScript가 혼합되어 유지보수가 어렵다.
• 현재는 사용을 권장하지 않는다.

2.2 이벤트 핸들러 프로퍼티 방식

요소의 이벤트 프로퍼티에 함수를 할당하는 방식이다.

const btn = document.getElementById('btn');
btn.onclick = function() {
    console.log('클릭');
};

• 하나의 이벤트에 하나의 핸들러만 등록 가능하다.
• 이후에 할당된 함수가 이전 함수를 덮어쓴다.

2.3 addEventListener 방식 (표준)

가장 권장되는 현대적인 방식이다.

btn.addEventListener('click', () => {
    console.log('첫 번째 이벤트');
});
btn.addEventListener('click', () => {
    console.log('두 번째 이벤트');
});

• 하나의 이벤트에 여러 핸들러를 등록할 수 있다.
• 이벤트 제거도 가능하다.

2.4 이벤트 핸들러 제거

const mission = () => alert('임무 수행');

btn.addEventListener('click', mission);
btn.removeEventListener('click', mission);

• 제거하려면 동일한 함수 참조가 필요하다.
• 익명 함수는 제거할 수 없다.

---

3. 마우스 이벤트

이벤트	설명
click	마우스 왼쪽 버튼 클릭
dblclick	더블 클릭
mousedown	버튼을 누르는 순간
mouseup	버튼을 떼는 순간
mousemove	마우스 이동
contextmenu	오른쪽 클릭

button.addEventListener('mousedown', (e) => {
    console.log(e.button); // 0: 왼쪽, 1: 가운데, 2: 오른쪽
});

---

4. 키보드 이벤트

이벤트	설명
keydown	키를 누르는 순간 (계속 발생)
keyup	키에서 손을 떼는 순간

input.addEventListener('keydown', (e) => {
    console.log(e.key);   // 입력된 문자
    console.log(e.code);  // 물리적인 키 코드

    if (e.key === 'Enter') {
        console.log('검색 실행');
    }
});

---

5. 이벤트 객체(Event Object)

이벤트가 발생하면 브라우저는 이벤트에 대한 모든 정보를 담은 객체를 생성하여 핸들러의 첫 번째 인자로 전달한다.

속성	설명
e.target	실제 이벤트가 발생한 요소
e.currentTarget	이벤트 리스너가 등록된 요소
e.clientX / e.clientY	마우스 좌표
e.key	입력된 키 값
e.code	물리적인 키 코드

---

6. this와 e.currentTarget

6.1 일반 함수에서의 this

btn.addEventListener('click', function(e) {
    console.log(this); // 이벤트가 등록된 요소
});

6.2 화살표 함수에서의 this

btn.addEventListener('click', (e) => {
    console.log(this); // 상위 스코프(window)를 가리킴
});

6.3 Best Practice

btn.addEventListener('click', (e) => {
    const element = e.currentTarget;
    element.style.backgroundColor = 'skyblue';
});

• this 대신 e.currentTarget 사용을 권장한다.

---

7. 이벤트 전파(Event Propagation)

7.1 이벤트 버블링

자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 현상이다.

parent.addEventListener('click', () => console.log('부모'));
child.addEventListener('click', () => console.log('자식'));

7.2 이벤트 위임(Event Delegation)

부모 요소에 하나의 이벤트 핸들러를 등록하여 여러 자식 요소의 이벤트를 처리하는 기법이다.

list.addEventListener('click', (e) => {
    if (e.target.matches('li')) {
        e.target.classList.toggle('highlight');
    }
});

장점

• 코드의 효율성 증가
• 동적으로 추가된 요소에도 적용 가능
• 메모리 사용 감소

---

8. 이벤트 제어

8.1 preventDefault()

브라우저의 기본 동작을 막는다.

form.addEventListener('submit', (e) => {
    e.preventDefault();
});

8.2 stopPropagation()

이벤트가 부모 요소로 전파되는 것을 막는다.

child.addEventListener('click', (e) => {
    e.stopPropagation();
});

---

9. 폼(Form) 이벤트

9.1 focus와 blur

input.addEventListener('focus', (e) => {
    e.target.classList.add('focused');
});
input.addEventListener('blur', (e) => {
    e.target.classList.remove('focused');
});

9.2 input 이벤트 (실시간 입력 감지)

textarea.addEventListener('input', (e) => {
    counter.textContent = e.target.value.length;
});

9.3 submit 이벤트와 유효성 검사

form.addEventListener('submit', (e) => {
    if (username.value.trim().length < 2) {
        e.preventDefault();
        error.textContent = '이름은 2글자 이상 입력해주세요.';
    }
});

---

10. 비동기 프로그래밍 (Asynchronous Programming)

10.1 동기(Synchronous) 처리

• 작업이 순차적으로 실행되며, 하나의 작업이 끝날 때까지 다음 작업이 대기한다.
• 긴 작업이 있을 경우 브라우저가 멈춘 것처럼 보일 수 있다.

10.2 setTimeout

setTimeout(() => {
    console.log('3초 후 실행');
}, 3000);

• 지정된 시간이 지난 후 한 번 실행된다.
• clearTimeout()으로 취소 가능하다.

10.3 setInterval

const id = setInterval(() => {
    console.log('반복 실행');
}, 1000);

clearInterval(id);

• 일정 시간 간격으로 반복 실행된다.

---

11. 이벤트 루프(Event Loop)

자바스크립트는 싱글 스레드로 동작하지만, 브라우저의 도움으로 비동기 처리가 가능하다.

구성 요소

1. Call Stack: 코드가 실행되는 공간
2. Web API: 타이머, 네트워크 요청 등을 처리
3. Task Queue: 완료된 콜백이 대기하는 공간
4. Event Loop: Call Stack이 비었을 때 Task Queue의 작업을 실행

console.log('시작');
setTimeout(() => console.log('타이머'), 0);
console.log('끝');

실행 결과

시작
끝
타이머

---

12. 브라우저 객체 모델(BOM)

12.1 window 객체

브라우저의 전역 객체로, 모든 BOM과 DOM의 최상위 객체이다.

12.2 사용자 대화 상자

alert('메시지');
confirm('진행하시겠습니까?'); // true 또는 false 반환
prompt('이름을 입력하세요'); // 문자열 또는 null 반환

12.3 location 객체

location.href = '<https://www.google.com>';   // 페이지 이동
location.replace('<https://www.naver.com>');  // 뒤로가기 불가
location.reload();                          // 새로고침

12.4 history 객체

history.back();     // 뒤로 가기
history.forward();  // 앞으로 가기
history.go(2);      // 특정 페이지로 이동

12.5 navigator와 screen

• navigator: 브라우저와 운영체제 정보 제공
• screen: 사용자 화면 크기 정보 제공