JavaScript Event - 온더테크

자바스크립트의 이벤트는 웹 페이지에서 발생하는 사용자 상호작용 또는 다른 변화에 대한 신호를 의미합니다. 이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하며, 자바스크립트를 통해 이러한 이벤트에 반응할 수 있습니다. 이벤트는 버튼 클릭, 폼 제출, 마우스 이동 등 다양한 상황에서 발생할 수 있습니다.

1. 이벤트 개요

이벤트는 웹 페이지의 요소에 대한 사용자 상호작용이나 다른 변화가 있을 때 발생합니다. 이벤트 객체는 이벤트에 대한 정보를 포함하고 있으며, 이벤트 리스너를 통해 이벤트 발생 시 호출되는 함수입니다.

2. 주요 이벤트 유형

클릭 이벤트 (Click Event): 사용자가 요소를 클릭할 때 발생합니다.
변경 이벤트 (Change Event): 입력 필드, 드롭다운 등에서 값이 변경될 때 발생합니다.
제출 이벤트 (Submit Event): 폼이 제출될 때 발생합니다.
마우스 이벤트 (Mouse Events): 마우스 클릭, 이동, 오버 등과 관련된 이벤트입니다.
키보드 이벤트 (Keyboard Events): 키 입력과 관련된 이벤트입니다.
로드 이벤트 (Load Event): 페이지 또는 리소스가 로드될 때 발생합니다.
포커스 이벤트 (Focus Event): 입력 필드나 다른 포커스 가능한 요소에 포커스가 이동할 때 발생합니다.

3. 이벤트 등록과 리스너

3.1 `addEventListener`

addEventListener 메서드를 사용하여 이벤트 리스너를 등록합니다. 이 메서드는 이벤트가 발생할 때 실행될 함수를 지정합니다.

// 예시: 버튼 클릭 이벤트
const button = document.getElementById('myButton');

function handleClick() {
  alert('Button clicked!');
}

button.addEventListener('click', handleClick);

type: 이벤트의 종류 (예: ‘click’, ‘submit’, ‘mouseover’ 등).
listener: 이벤트가 발생할 때 호출될 함수.
options (선택 사항): 이벤트 캡처링/버블링, once, passive 등의 옵션을 설정합니다.

3.2 `removeEventListener`

removeEventListener 메서드를 사용하여 등록된 이벤트 리스너를 제거할 수 있습니다.

// 예시: 버튼 클릭 이벤트 리스너 제거
button.removeEventListener('click', handleClick);

type과 listener는 addEventListener와 동일해야 하며, 추가된 이벤트 리스너와 동일한 함수 참조를 사용해야 합니다.

4. 이벤트 객체

이벤트 객체는 이벤트와 관련된 정보를 담고 있으며, 이벤트 리스너에 자동으로 전달됩니다. 주요 속성과 메서드는 다음과 같습니다:

type: 이벤트의 타입 (예: ‘click’, ‘keydown’ 등).
target: 이벤트가 발생한 요소.
currentTarget: 현재 이벤트 리스너가 등록된 요소.
eventType: 이벤트의 타입을 문자열로 반환합니다.
stopPropagation(): 이벤트의 전파를 중지합니다.
preventDefault(): 기본 동작을 중지합니다 (예: 링크 클릭 시 페이지 이동 방지).
clientX, clientY: 마우스 이벤트의 X, Y 좌표.

button.addEventListener('click', function(event) {
  console.log(event.type);          // 'click'
  console.log(event.target);        // 클릭된 요소
  console.log(event.clientX, event.clientY); // 마우스 클릭 좌표
  event.preventDefault();           // 기본 동작 방지
});

5. 이벤트 전파 (Event Propagation)

이벤트 전파는 이벤트가 DOM 트리 내에서 전파되는 과정을 설명합니다. 기본적으로 두 가지 단계가 있습니다:

캡처링 단계 (Capturing Phase): 이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 내려갑니다.
버블링 단계 (Bubbling Phase): 이벤트가 발생한 요소에서 최상위 요소까지 올라갑니다.

5.1 캡처링과 버블링

addEventListener 메서드에서 options 매개변수를 사용하여 이벤트 전파 방식을 제어할 수 있습니다.

// 캡처링 단계에서 이벤트 리스너 추가
document.getElementById('parent').addEventListener('click', function() {
  console.log('Captured during capturing phase');
}, true);

// 버블링 단계에서 이벤트 리스너 추가
document.getElementById('child').addEventListener('click', function() {
  console.log('Captured during bubbling phase');
});

true를 세 번째 인수로 제공하면 캡처링 단계에서 이벤트를 처리합니다.
생략하거나 false를 제공하면 버블링 단계에서 이벤트를 처리합니다.

5.2 이벤트 위임 (Event Delegation)

이벤트 위임은 상위 요소에 이벤트 리스너를 추가하여 자식 요소에서 발생한 이벤트를 처리하는 기법입니다. 이를 통해 자식 요소가 동적으로 추가되거나 제거될 때도 일관되게 이벤트를 처리할 수 있습니다.

// 이벤트 위임 예시
document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('button')) {
    console.log('Button clicked:', event.target);
  }
});

6. 이벤트 핸들러의 여러 가지 형태

6.1 인라인 이벤트 핸들러

HTML 요소의 onclick, onchange 속성 등을 사용하여 이벤트 핸들러를 지정할 수 있습니다. 그러나 이 방법은 자바스크립트와 HTML을 분리하지 않으므로 일반적으로 권장되지 않습니다.

<button onclick="alert('Button clicked!')">Click Me</button>

6.2 속성 기반 이벤트 핸들러

자바스크립트에서 직접 요소의 이벤트 핸들러 속성을 설정할 수도 있습니다.

const button = document.getElementById('myButton');
button.onclick = function() {
  alert('Button clicked!');
};

속성 기반 이벤트 핸들러는 기존 핸들러를 덮어쓰므로 주의가 필요합니다.

7. 커스텀 이벤트

자바스크립트는 기본 제공되는 이벤트 외에도 커스텀 이벤트를 생성하고 사용할 수 있습니다.

7.1 커스텀 이벤트 생성 및 디스패치

// 커스텀 이벤트 생성
const customEvent = new CustomEvent('myCustomEvent', { detail: { key: 'value' } });

// 이벤트 디스패치
const element = document.getElementById('myElement');
element.dispatchEvent(customEvent);

7.2 커스텀 이벤트 리스너

element.addEventListener('myCustomEvent', function(event) {
  console.log('Custom event received:', event.detail);
});

8. 예제: 다양한 이벤트 활용

8.1 클릭 이벤트 예제

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});

8.2 마우스 이동 이벤트 예제

document.addEventListener('mousemove', function(event) {
  console.log('Mouse position:', event.clientX, event.clientY);
});

8.3 폼 제출 이벤트 예제

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 폼 제출 기본 동작 방지
  console.log('Form submitted!');
});

8.4 키보드 입력 이벤트 예제

document.addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

결론

자바스크립트의 이벤트는 사용자 상호작용 및 페이지 내의 다양한 상태 변화를 처리하는 데 필수적입니다. 이벤트를 잘 활용하면 웹 페이지의 동적인 동작과 상호작용을 효율적으로 구현할 수 있습니다. 이벤트 등록, 이벤트 객체 활용, 이벤트 전파 및 커스텀 이벤트 등 다양한 이벤트 관련 개념을 이해하고 활용하면 풍부한 사용자 경험을 제공하는 웹 애플리케이션을 개발할 수 있습니다.

Post Views: 244