JavaScript 이벤트 핸들링의 기초부터 익히기 🌟

웹 개발에서 JavaScript는 웹 페이지에 생동감을 불어넣는 핵심적인 역할을 합니다. 특히, 사용자와의 상호작용을 처리하는 이벤트 핸들링은 웹 개발의 중요한 부분입니다. 오늘은 JavaScript 이벤트 핸들링의 기초를 쉽게 이해할 수 있도록 안내해 드리겠습니다.

이벤트 핸들링이란?

간단히 말해, 이벤트 핸들링은 사용자가 웹 페이지에서 어떤 동작을 취했을 때, 그에 대응하여 무엇인가를 실행하는 과정입니다. 예를 들어, 버튼을 클릭했을 때 메시지가 나타나게 하거나, 마우스를 움직일 때 특정 애니메이션이 실행되는 것 등이 이에 해당합니다.

기본적인 이벤트 핸들러 사용하기

JavaScript에서 이벤트를 다루는 가장 기본적인 방법은 HTML 요소에 이벤트 핸들러를 추가하는 것입니다. 아래는 버튼 클릭 이벤트를 처리하는 간단한 예제입니다.

<button id="clickButton">클릭하세요!</button>

<script>
document.getElementById("clickButton").addEventListener("click", function() {
  alert("버튼이 클릭되었습니다!");
});
</script>

위 코드에서는 addEventListener 메소드를 사용하여 버튼에 클릭 이벤트를 추가했습니다. 사용자가 버튼을 클릭하면, alert 함수가 호출되어 "버튼이 클릭되었습니다!"라는 메시지가 나타납니다.

다양한 이벤트 유형

JavaScript에서는 클릭 이벤트 외에도 다양한 이벤트를 제공합니다. 몇 가지 예를 들어보겠습니다:

• mouseover: 요소 위로 마우스를 이동했을 때
• mouseout: 요소에서 마우스가 벗어났을 때
• keydown: 키보드의 키를 눌렀을 때
• load: 웹 페이지나 이미지가 완전히 로드되었을 때

이벤트의 종류는 매우 다양하므로, 자신의 프로젝트에 맞는 이벤트를 선택하여 사용할 수 있습니다.

이벤트 객체

이벤트 핸들러 함수 내에서는 이벤트 객체에 접근할 수 있습니다. 이 객체는 이벤트에 대한 다양한 정보를 담고 있습니다. 예를 들어, 어떤 키가 눌렸는지, 마우스의 위치는 어디인지 등의 정보를 알 수 있습니다.

document.addEventListener("keydown", function(event) {
  console.log("눌린 키: " + event.key);
});

위 예제에서는 keydown 이벤트가 발생할 때마다, 눌린 키의 이름을 콘솔에 출력합니다.

마무리

JavaScript의 이벤트 핸들링은 웹 페이지를 더욱 동적이고 상호작용적으로 만들어 줍니다. 오늘 소개한 기본적인 개념과 예제를 통해, 여러분도 자신만의 웹 페이지에 다양한 이벤트를 추가해 보세요. 웹 개발의 세계는 끝없이 탐험할 것들로 가득 차 있습니다. Happy coding!