DOM Event Handling

사용자의 동작에 반응하는 **이벤트 처리(Event Handling)**에 대해 알아보겠습니다.

웹 페이지가 단순히 정보를 보여주는 것을 넘어 사용자와 상호작용하려면 이벤트 처리가 필수적입니다.

---

📘 1. 이벤트 처리 방법 (addEventListener)

과거에는 HTML 태그에 직접 onclick 등을 작성했지만, 현대 자바스크립트에서는 addEventListener() 함수를 사용하는 것이 표준입니다.

• 기능: 특정 요소에 이벤트가 발생했을 때 실행할 함수를 등록합니다.
• 구조: 요소.addEventListener('이벤트종류', 실행할함수);
• 장점: 하나의 요소에 여러 개의 이벤트를 등록할 수 있고, HTML과 자바스크립트 코드를 깨끗하게 분리할 수 있습니다.

---

📘 2. 이벤트 객체 (Event Object)

이벤트가 발생하면 브라우저는 발생한 이벤트에 대한 상세 정보를 담은 이벤트 객체를 생성하여 함수에 전달합니다.

• 접근 방법: 이벤트 리스너 함수의 첫 번째 파라미터(보통 e 또는 event)로 전달받습니다.
• 주요 정보:
  • e.target: 이벤트가 발생한 실제 대상 요소가 무엇인지 알려줍니다.
  • e.type: 발생한 이벤트의 종류(click, submit 등)를 확인합니다.
  • e.key: 키보드 이벤트 시 어떤 키를 눌렀는지 알려줍니다.

---

📘 3. 이벤트 제어 함수 (중요 메서드)

이벤트를 다룰 때 흐름을 제어하기 위해 꼭 알아야 하는 두 가지 핵심 함수가 있습니다.

① e.preventDefault()

• 기능: 브라우저가 기본적으로 수행하는 동작을 막습니다.
• 활용: 폼(form) 제출 시 페이지가 새로고침되는 것을 막거나, 링크(<a>) 클릭 시 페이지 이동을 방지할 때 주로 사용합니다.

② e.stopPropagation()

• 기능: 이벤트가 부모 요소로 퍼져 나가는 **이벤트 버블링(Event Bubbling)**을 중단시킵니다.
• 활용: 자식 요소를 클릭했을 때 부모 요소의 클릭 이벤트까지 같이 실행되는 것을 방지합니다.

---

🖥️ 실전 예제 코드

학생들이 이벤트 객체의 역할을 직접 체감해 볼 수 있는 예제입니다.

JavaScript

 

// 1. 버튼 요소 선택
const btn = document.querySelector('#myButton');

// 2. 이벤트 리스너 등록
btn.addEventListener('click', function(e) {
    // e는 브라우저가 자동으로 전달해준 이벤트 객체입니다.
    
    console.log('클릭된 요소:', e.target); // 클릭된 버튼 정보 출력
    
    // 스타일 변경 예시
    e.target.style.backgroundColor = 'yellow';
    e.target.textContent = '클릭됨!';
});

// 3. 폼 제출 방지 예시
const myForm = document.querySelector('#loginForm');
myForm.addEventListener('submit', function(e) {
    e.preventDefault(); // 서버로 데이터를 보내기 전 새로고침 방지
    alert('제출이 중단되었습니다. 유효성 검사를 시작합니다.');
});

---

오늘의 요약

• **addEventListener**는 이벤트를 감시하고 반응을 실행하는 가장 세련된 방법이다.
• **이벤트 객체(e)**는 '누가', '어떻게' 이벤트를 일으켰는지에 대한 정보를 모두 담고 있다.
• **preventDefault()**는 브라우저의 고집(기본 동작)을 꺾을 때 사용한다.
• **stopPropagation()**은 이벤트가 위로 번지는 것을 막을 때 사용한다.

---

이벤트 처리의 핵심 원리를 모두 정리해 보았습니다!

---