7. 자바스크립트 이벤트 기초

자바스크립트 이벤트 기초

지금까지 변수와 데이터 타입, 조건문과 반복문, 함수, 배열, 객체를 배웠다면, 이번엔 웹 페이지에서 사용자와 상호작용할 수 있게 해주는 이벤트를 배워볼 거다. 이벤트는 자바스크립트에서 버튼 클릭, 마우스 이동, 키보드 입력 같은 사용자 행동에 반응하는 핵심적인 방법으로, 동적인 웹을 만드는 데 필수적이다. 이벤트를 잘 익히면 정적인 HTML을 살아있는 웹 페이지로 바꿀 수 있다.

내가 처음 코딩을 배울 때 버튼을 눌렀을 때 반응이 없어서 답답했는데, 이벤트를 배우고 나니까 웹이 정말 살아있다는 느낌을 받았다. 이번 글에선 이벤트의 정의와 종류, 이벤트 핸들러 등록 방법, 이벤트 객체 활용법, 그리고 실습 예제를 상세히 다룰 거다. 천천히 따라오면서 콘솔이나 HTML 파일에서 직접 실행해보면 이벤트의 매력을 느낄 수 있을 거다. 이벤트는 단순히 반응을 추가하는 데 그치지 않고, 사용자 경험을 개선하고 웹 애플리케이션의 상호작용성을 높이는 데 큰 역할을 한다.

앞서 배운 개념들과 이벤트를 결합하면 더 실용적인 코드를 작성할 수 있다. 예를 들어, 배열에 저장된 데이터를 버튼 클릭으로 표시하거나, 객체의 속성을 키보드 입력으로 수정하는 작업을 쉽게 구현할 수 있다.

이벤트란 무엇인가?

이벤트(Event)는 웹 페이지에서 사용자가 특정 행동을 했을 때 발생하는 신호다. 자바스크립트는 이 이벤트를 감지해서 미리 정의한 코드를 실행할 수 있게 해준다. 예를 들어, 사용자가 버튼을 클릭하거나, 마우스를 움직이거나, 키보드를 누르는 행위가 모두 이벤트로 인식된다. 이벤트를 쓰면 정적인 HTML에 동적인 기능을 추가해서 사용자와 상호작용할 수 있는 웹을 만들 수 있다.

예를 들어, 버튼을 눌렀을 때 메시지를 띄우고 싶다면 이벤트가 필요하다:

<button id="myButton">클릭하세요</button>
<script>
    document.getElementById("myButton").onclick = function() {
        alert("버튼이 클릭됐어요!");
    };
</script>

이 코드를 실행하면 버튼을 누를 때마다 경고창이 뜬다. 내가 처음 이벤트를 배울 때 이런 간단한 반응이 신기했는데, 나중에 보니 이벤트는 웹 개발의 핵심이었다. 자바스크립트에서 이벤트는 DOM(Document Object Model)과 밀접하게 연결돼 있어서, HTML 요소와 사용자 행동을 연결하는 다리 역할을 한다.

이벤트는 사용자 행동뿐만 아니라 시스템에서 발생하는 일(예: 페이지 로드 완료, 네트워크 응답 등)도 포함한다. 실무에선 이벤트로 버튼 클릭을 처리하거나, 폼 제출을 확인하거나, 스크롤에 따라 애니메이션을 넣는 경우가 많다. 이벤트는 자바스크립트가 웹을 동적으로 만드는 핵심 도구로, 이를 통해 사용자가 직접 경험할 수 있는 인터랙티브한 환경을 제공한다.

이벤트의 종류

자바스크립트에서 다룰 수 있는 이벤트는 정말 다양하다. 몇 가지 주요 이벤트를 소개하면:

1. 마우스 이벤트

- click: 요소를 클릭했을 때.

- mouseover: 마우스가 요소 위로 올라갈 때.

- mouseout: 마우스가 요소를 떠날 때.

- mousedown: 마우스 버튼을 누를 때.

- mouseup: 마우스 버튼을 뗄 때.

예를 들어, 버튼에 마우스를 올리면 색이 바뀌게 할 수 있다:

<button id="hoverButton">마우스를 올려보세요</button>
<script>
    let btn = document.getElementById("hoverButton");
    btn.onmouseover = function() {
        btn.style.backgroundColor = "lightblue";
    };
    btn.onmouseout = function() {
        btn.style.backgroundColor = "";
    };
</script>

내가 처음 이걸 썼을 때 마우스 반응이 이렇게 쉬울 수가 있나 싶었다.

2. 키보드 이벤트

- keydown: 키를 누를 때.

- keyup: 키를 뗄 때.

- keypress: 키를 눌렀을 때(현재는 잘 안 쓰임).

예를 들어, 엔터 키를 눌렀을 때 메시지를 띄울 수 있다:

<input id="myInput" type="text">
<script>
    document.getElementById("myInput").onkeydown = function(event) {
        if (event.key === "Enter") {
            console.log("엔터를 눌렀어요!");
        }
    };
</script>

3. 폼 이벤트

- submit: 폼을 제출할 때.

- change: 입력값이 바뀔 때.

- focus: 요소에 포커스가 갈 때.

- blur: 요소에서 포커스가 떠날 때.

예를 들어, 입력값이 바뀔 때 확인할 수 있다:

<input id="myInput" type="text">
<script>
    document.getElementById("myInput").onchange = function() {
        console.log("입력값이 바뀌었어요!");
    };
</script>

4. 창/문서 이벤트

- load: 페이지가 로드 완료될 때.

- resize: 창 크기가 바뀔 때.

- scroll: 스크롤할 때.

예를 들어, 페이지 로드 완료를 감지한다:

<script>
    window.onload = function() {
        console.log("페이지가 로드됐어요!");
    };
</script>

내가 처음 이벤트 종류를 접했을 때 이렇게 많을 줄 몰라서 놀랐다. 이벤트는 웹에서 거의 모든 상호작용을 다룰 수 있게 해준다.

이벤트 핸들러 등록 방법

이벤트를 감지하고 반응하려면 이벤트 핸들러를 등록해야 한다. 자바스크립트에서 핸들러를 등록하는 방법은 세 가지가 주로 쓰인다.

1. 인라인 이벤트 핸들러

HTML 태그에 직접 속성으로 추가한다:

<button onclick="alert('클릭!')">클릭하세요</button>

간단하지만 코드가 섞여서 가독성이 떨어진다. 내가 처음엔 이걸 썼는데, 나중엔 관리하기 힘들어서 다른 방법을 선호하게 됐다.

2. DOM 속성으로 등록

자바스크립트에서 요소의 이벤트 속성에 함수를 지정한다:

<button id="myButton">클릭하세요</button>
<script>
    document.getElementById("myButton").onclick = function() {
        console.log("버튼 클릭!");
    };
</script>

이 방식은 HTML과 JS를 분리해서 깔끔하다. 단, 한 이벤트에 하나만 등록할 수 있다.

3. addEventListener 사용

가장 현대적이고 유연한 방법이다:

<button id="myButton">클릭하세요</button>
<script>
    let btn = document.getElementById("myButton");
    btn.addEventListener("click", function() {
        console.log("버튼 클릭!");
    });
</script>

같은 이벤트에 여러 핸들러를 추가할 수 있다:

btn.addEventListener("click", function() {
    console.log("또 다른 반응!");
});

내가 처음 addEventListener를 썼을 때 유연성에 감동받았다. 실무에서 가장 추천하는 방식이다.

이벤트 객체 활용

이벤트가 발생하면 이벤트 객체(Event Object)가 자동으로 전달된다. 이 객체는 이벤트에 대한 정보를 담고 있다.

기본 사용

<button id="myButton">클릭하세요</button>
<script>
    document.getElementById("myButton").addEventListener("click", function(event) {
        console.log(event);
    });
</script>

이벤트 객체는 클릭 위치, 키 값, 타겟 요소 같은 데이터를 제공한다:

document.getElementById("myButton").addEventListener("click", function(event) {
    console.log("클릭 위치: ", event.clientX, event.clientY);
});
// 클릭 시 마우스 좌표 출력

키보드 이벤트 활용

<input id="myInput" type="text">
<script>
    document.getElementById("myInput").addEventListener("keydown", function(event) {
        console.log("눌린 키: ", event.key);
    });
</script>

내가 처음 이벤트 객체를 썼을 때 이렇게 상세한 정보가 나오는 줄 몰라서 놀랐다.

실습 예제

이벤트를 활용한 실습을 해보자:

<button id="colorButton">색상 변경</button>
<input id="textInput" type="text" placeholder="텍스트 입력">
<script>
    let btn = document.getElementById("colorButton");
    let input = document.getElementById("textInput");
    let colors = ["red", "blue", "green"];
    let index = 0;

    btn.addEventListener("click", function() {
        document.body.style.backgroundColor = colors[index];
        index = (index + 1) % colors.length;
    });

    input.addEventListener("keyup", function(event) {
        if (event.key === "Enter") {
            console.log("입력값: ", input.value);
            input.value = "";
        }
    });
</script>

버튼 클릭으로 배경색을 바꾸고, 입력창에서 엔터를 누르면 값을 출력한다. 이벤트와 배열을 결합한 예제다.

주의할 점

이벤트 핸들러를 중복 등록하면 예상치 못한 동작이 생길 수 있다. 이벤트 객체의 속성을 사용할 때 브라우저 호환성을 확인하자. 기본 동작을 막고 싶을 땐 event.preventDefault()를 써야 한다.

결론

이번 포스팅에서 자바스크립트 이벤트의 기초를 다뤘다. 이벤트 종류, 핸들러 등록, 객체 활용까지 배웠으니 이제 웹에서 사용자와 상호작용할 수 있다. 다음 글에선 이벤트 버블링과 캡처링 같은 고급 개념을 알아보자.