[JS] 이벤트 핸들링 (클릭, 마우스 오버 등)

이벤트 핸들링(Event Handling)은 웹 페이지에서 사용자의 동작에 대응하여 원하는 동작을 실행하는 기능을 말합니다. 웹 페이지에서 발생하는 다양한 이벤트에 대해 감지하고, 해당 이벤트에 대응하는 동작을 처리하는 것이 중요합니다. 자바스크립트를 사용하여 이벤트 핸들링을 구현하는 방법에 대해 알아보겠습니다.

---

이벤트 핸들링 개념

이벤트 핸들링은 사용자와의 상호작용에 응답하여 웹 페이지를 동적으로 제어하는 기능을 의미합니다. 주로 DOM 요소에 이벤트 리스너를 등록하여 이벤트를 감지하고, 이벤트가 발생했을 때 원하는 동작을 수행합니다.

---

이벤트 리스너 등록

이벤트 리스너를 등록하여 특정 이벤트를 감지하고, 이벤트가 발생했을 때 호출될 함수를 지정합니다. addEventListener 메서드를 사용하여 이벤트 리스너를 등록합니다.

<button id="myButton">Click me</button>

let button = document.getElementById('myButton');

function handleClick() {
    console.log('Button clicked!');
}

button.addEventListener('click', handleClick);

---

주요 이벤트 타입

자주 사용되는 주요 이벤트 타입은 다음과 같습니다.

• 클릭 이벤트: click
• 마우스 오버 이벤트: mouseover
• 마우스 아웃 이벤트: mouseout
• 키보드 입력 이벤트: keydown, keyup, keypress
• 폼 제출 이벤트: submit
• 입력 필드 변경 이벤트: change
• 스크롤 이벤트: scroll
• 등등

---

이벤트 핸들러 함수

이벤트 핸들러 함수는 이벤트가 발생했을 때 호출되는 함수입니다. 이벤트 핸들러 함수는 이벤트 객체를 매개변수로 받아서 이벤트 정보를 활용할 수 있습니다.

let button = document.getElementById('myButton');

function handleClick(event) {
    console.log('Button clicked!');
    console.log('이벤트 정보:', event);
}

button.addEventListener('click', handleClick);

---

이벤트의 기본 동작 막기

일부 이벤트는 기본적으로 브라우저가 수행하는 동작이 있습니다. 이러한 기본 동작을 막고 자신이 원하는 동작을 처리하기 위해 preventDefault 메서드를 사용할 수 있습니다.

<a href="https://www.example.com" id="myLink">Click me</a>

let link = document.getElementById('myLink');

function handleLinkClick(event) {
    event.preventDefault(); // 기본 동작 막기
    console.log('Link clicked!');
}

link.addEventListener('click', handleLinkClick);

---

이벤트 핸들링은 웹 페이지에서 사용자와의 상호작용을 처리하기 위해 중요한 개념입니다. 이벤트 리스너를 등록하여 특정 이벤트를 감지하고, 이벤트 핸들러 함수를 작성하여 원하는 동작을 구현할 수 있습니다. 주요 이벤트 타입은 클릭, 마우스 오버, 키보드 입력 등이며, 이를 활용하여 웹 페이지를 더욱 동적이고 인터랙티브하게 만들 수 있습니다. 또한, preventDefault 메서드를 사용하여 이벤트의 기본 동작을 막을 수 있습니다. 웹 개발에서 이벤트 핸들링은 반드시 익숙해져야 하는 기능 중 하나이며, 다양한 이벤트를 다루는 능력이 필수적입니다.