JavaScript - BOM(3)

집합 이벤트 — 정적 vs 동적

정적 이벤트 등록 방식

• 태그에 직접 onXXX 속성 작성

방식	설명	예시
단순	버튼마다 각각 다른 함수	onclick="m1()"
매개변수	하나의 함수 + 값 전달	onclick="m4('tomato')"
this	이벤트 주체(태그) 자체를 전달	onclick="m5(this)"
data-xxx	사용자 정의 데이터 속성 활용	onclick="m6(this)" data-color="tomato"

// this — 이벤트를 발생시킨 태그 객체
function m5(obj) {
    if (obj.value == '빨강') document.body.bgColor = 'tomato';
}

// data-xxx 속성 접근
function m6(obj) {
    document.body.bgColor = obj.dataset['color'];
}

동적 이벤트 등록 방식

• 런타임 시 태그 객체에 이벤트 프로퍼티 대입

document.all['btnRed5'].onclick = m7;  // 각각 다른 함수
document.all['btnRed6'].onclick = m10; // 동일 함수 공유

• event.target — 동일 함수에서 이벤트 발생 주체 구분

function m10() {
    document.body.bgColor = event.target.dataset['color'];
}

• name 통일 + 반복문 — 같은 name 여러 버튼을 배열처럼 처리

for (var i = 0; i < document.all['btn7'].length; i++) {
    document.all['btn7'][i].onclick = m11;
}
function m11() {
    document.body.bgColor = event.target.dataset['color'];
}

타이머 (Timer)

• 비동기 방식 업무 구현 도구

메서드	설명
setTimeout(함수, ms)	1회용 타이머
setInterval(함수, ms)	반복 타이머
clearTimeout(id)	1회용 타이머 중지
clearInterval(id)	반복 타이머 중지

var id = 0;

// 시작 — 중복 실행 방지 (id == 0 체크)
function m1() {
    if (id == 0) {
        id = setInterval(f1, 100);
    }
}

// 멈춤
function m2() {
    clearInterval(id);
    id = 0;  // 초기화 필수
}

id == 0 조건 체크 → 시작 버튼 중복 클릭 방지 ⚠️

JavaScript 함수 — 1급 객체

• 함수를 값으로 취급 가능

특징	설명
저장	변수/데이터 구조에 담을 수 있음
전달	매개변수로 넘길 수 있음
반환	반환값으로 사용할 수 있음

함수 선언 방법

방식	형태	특징
함수 선언문	function m1() {}	실명 함수, 호이스팅 O
함수 표현식	var f1 = function() {}	익명 함수, 변수에 저장
즉시 실행 함수	(function() {})()	1회 즉시 호출, 재사용 불가

// 함수를 매개변수로 전달 (콜백)
function f5(param) { param(); }
f5(f3);
f5(function() { alert('익명함수'); });

// 함수를 반환값으로 사용
function f7() { return f6; }
f7()();  // f6 실행

이벤트 등록 시 익명 함수 표현식을 바로 대입하는 방식이 실무에서 가장 많이 사용