JavaScript 기초: 이벤트와 콜백

JavaScript 기초: 이벤트와 콜백

이번 포스팅에서는 JavaScript에서 이벤트(Event)와 콜백(Callback)에 대해 알아보겠습니다. 이벤트는 사용자의 특정 동작(클릭, 키 입력 등)에 반응하는 것을 의미하며, 콜백은 이벤트가 발생했을 때 실행되는 함수입니다.

1. 이벤트 추가

1.1 addEventListener 사용하기

이벤트를 추가하는 가장 기본적인 방법은 addEventListener를 사용하는 것입니다.

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});
    

2. 콜백 함수

2.1 콜백 함수의 기본

콜백 함수는 다른 함수의 인자로 전달되어 특정 조건에서 실행됩니다.

function greetUser(callback) {
    console.log("안녕하세요!");
    callback(); // 전달받은 콜백 함수 실행
}

function showTime() {
    console.log("현재 시간은 " + new Date().toLocaleTimeString() + "입니다.");
}

greetUser(showTime);
    

3. 활용 예제

실습 과제

1. 버튼 클릭 시 새로운 문장을 화면에 추가하는 이벤트 리스너를 작성하세요.

정답 확인 👇

// 실습 1: 버튼 클릭 시 문장 추가
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
    const newParagraph = document.createElement("p");
    newParagraph.textContent = "이 버튼을 클릭하셨습니다!";
    document.body.appendChild(newParagraph);
});

            

이번 포스팅에서는 JavaScript의 이벤트와 콜백에 대해 알아보았습니다. 다음에는 비동기 처리와 프로미스(Promise)에 대해 다뤄보겠습니다!