▶ JavaScript HTML DOM

JavaScript DOM Events

JavaScript DOM Events: 사용자 상호작용 처리하기

JavaScript DOM Events는 웹 페이지에서 발생하는 다양한 사용자 상호작용을 처리하는 방법입니다. 이벤트는 사용자가 페이지와 상호작용할 때 발생하는 동작으로, 클릭, 키 입력, 마우스 이동 등 여러 가지 유형이 있습니다. JavaScript를 사용하여 이러한 이벤트를 감지하고 처리함으로써 웹 애플리케이션의 동적인 기능을 구현할 수 있습니다.

이 가이드는 JavaScript를 사용하여 DOM 이벤트를 처리하는 방법에 대해 설명합니다.

1. 이벤트의 기본 개념

이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하는 특정 작업입니다. JavaScript를 사용하면 이러한 이벤트를 감지하고 처리할 수 있습니다. 각 이벤트는 특정 요소와 관련이 있으며, 해당 요소에서 발생한 동작에 따라 실행됩니다.

1.1. 주요 이벤트 유형

마우스 이벤트: click, dblclick, mouseenter, mouseleave, mousemove
키보드 이벤트: keydown, keyup, keypress
폼 이벤트: submit, change, input, focus, blur
문서 이벤트: load, DOMContentLoaded

2. 이벤트 리스너 추가하기

이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 함수입니다. JavaScript를 사용하여 DOM 요소에 이벤트 리스너를 추가할 수 있습니다.

2.1. `addEventListener()`

addEventListener() 메서드를 사용하여 특정 요소에 이벤트 리스너를 추가합니다. 이 메서드는 다음과 같은 매개변수를 사용합니다:

이벤트 유형: 감지할 이벤트의 종류 (예: 'click', 'keydown')
콜백 함수: 이벤트가 발생했을 때 실행할 함수
옵션 (선택 사항): 이벤트의 추가 옵션 (버블링, 캡처링 등)

2.1.1. 클릭 이벤트 예시

<button id="myButton">Click Me!</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', () => {
      alert('Button was clicked!');  // 버튼 클릭 시 알림 창 표시
  });
</script>

위 코드에서는 버튼을 클릭할 때마다 알림 창이 표시됩니다.

3. 이벤트 객체

이벤트가 발생하면, JavaScript는 이벤트와 관련된 정보를 담고 있는 이벤트 객체를 생성합니다. 이 객체는 이벤트의 세부 정보를 제공합니다.

3.1. 이벤트 객체 사용 예시

<button id="myButton">Click Me!</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', (event) => {
      console.log(event);  // 이벤트 객체 출력
      console.log(event.target);  // 클릭된 요소를 나타냄
  });
</script>

이벤트 객체를 사용하면 클릭한 요소와 관련된 정보를 확인할 수 있습니다.

4. 이벤트 전파

이벤트 전파는 이벤트가 발생한 요소에서 상위 요소로 전파되는 과정을 의미합니다. 이 과정은 버블링과 캡처링으로 나뉘어집니다.

4.1. 버블링 (Bubbling)

버블링은 이벤트가 발생한 요소에서 시작하여 그 부모 요소로 전파되는 과정입니다. 기본적으로 이벤트는 버블링 방식으로 동작합니다.

<div id="parent">
  <button id="child">Click Me!</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', () => {
      console.log('Parent clicked!');
  });

  child.addEventListener('click', () => {
      console.log('Child clicked!');
  });
</script>

버튼을 클릭하면 먼저 "Child clicked!"가 출력되고, 그 후 "Parent clicked!"가 출력됩니다.

4.2. 캡처링 (Capturing)

캡처링은 이벤트가 부모 요소에서 시작하여 자식 요소로 전파되는 과정입니다. 캡처링을 사용하려면 addEventListener()의 세 번째 매개변수로 true를 전달합니다.

parent.addEventListener('click', () => {
    console.log('Parent clicked! (capturing)');
}, true);  // 캡처링 설정

위와 같이 설정하면 부모 요소가 먼저 클릭 이벤트를 감지하게 됩니다.

5. 이벤트 제거

이벤트 리스너를 제거하려면 removeEventListener() 메서드를 사용합니다. 이 메서드는 추가한 이벤트 리스너와 동일한 함수 참조를 필요로 합니다.

5.1. 이벤트 제거 예시

<button id="myButton">Click Me!</button>

<script>
  const button = document.getElementById('myButton');

  const handleClick = () => {
      alert('Button was clicked!');
  };

  button.addEventListener('click', handleClick);

  // 특정 조건에 따라 이벤트 리스너 제거
  button.removeEventListener('click', handleClick);
</script>

위의 코드에서는 버튼 클릭 시 알림을 표시하는 이벤트 리스너를 추가한 후, 특정 조건에서 제거하는 예시입니다.

6. 이벤트 위임

이벤트 위임은 부모 요소에 이벤트 리스너를 추가하고, 자식 요소에서 발생한 이벤트를 감지하는 기법입니다. 이를 통해 자식 요소가 동적으로 추가되거나 제거될 때 효율적으로 이벤트를 처리할 수 있습니다.

6.1. 이벤트 위임 예시

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<button id="addItem">Add Item</button>

<script>
  const list = document.getElementById('myList');
  const addItemButton = document.getElementById('addItem');

  // 이벤트 위임을 사용하여 <li> 클릭 이벤트 처리
  list.addEventListener('click', (event) => {
      if (event.target.tagName === 'LI') {
          alert(`You clicked on ${event.target.textContent}`);
      }
  });

  // 새 항목 추가
  addItemButton.addEventListener('click', () => {
      const newItem = document.createElement('li');
      newItem.textContent = `Item ${list.children.length + 1}`;
      list.appendChild(newItem);  // <ul>에 새 항목 추가
  });
</script>

위의 코드는 이벤트 위임을 사용하여 <li> 요소 클릭 이벤트를 처리합니다. 새 항목이 추가되더라도 부모 요소인 <ul>에 추가된 이벤트 리스너가 작동하여 클릭 이벤트를 감지합니다.

요약

JavaScript DOM Events는 사용자와 웹 페이지 간의 상호작용을 처리하는 중요한 기능입니다. 이벤트를 사용하면 사용자 입력에 반응하여 동적인 웹 애플리케이션을 만들 수 있습니다.

이벤트 리스너 추가: addEventListener()를 사용하여 특정 요소에 이벤트를 처리하는 함수를 추가합니다.
이벤트 객체: 이벤트가 발생하면 JavaScript는 이벤트 객체를 생성하여 관련 정보를 제공합니다.
이벤트 전파: 이벤트는 버블링과 캡처링을 통해 DOM 트리에서 전파됩니다.
이벤트 제거: removeEventListener()를 사용하여 이벤트 리스너를 제거할 수 있습니다.
이벤트 위임: 부모 요소에 이벤트 리스너를 추가하여 자식 요소에서 발생하는 이벤트를 효율적으로 처리할 수 있습니다.

JavaScript를 활용한 DOM 이벤트 처리는 사용자 경험을 향상시키고, 웹 애플리케이션의 동적인 기능을 구현하는 데 필수적인 요소입니다.

코딩 스쿨 JavaScript