▶ JavaScript HTML DOM

JavaScript DOM Event Listener

JavaScript DOM Event Listener: 이벤트 리스너의 이해와 활용

JavaScript DOM Event Listener는 웹 페이지에서 발생하는 사용자 상호작용을 감지하고 처리하는 방법입니다. 이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 기능으로, 사용자 인터페이스를 동적으로 업데이트하는 데 필수적입니다. 이 가이드는 이벤트 리스너의 개념, 사용법, 다양한 유형의 이벤트에 대해 설명합니다.

1. 이벤트 리스너의 기본 개념

이벤트 리스너는 특정 DOM 요소에 부착되어, 사용자의 상호작용(클릭, 키 입력 등)에 반응하여 특정 작업을 수행하도록 하는 함수입니다. 이벤트 리스너는 addEventListener() 메서드를 사용하여 등록합니다.

1.1. 기본 구문

element.addEventListener(event, function, useCapture);

element: 이벤트를 감지할 DOM 요소
event: 감지할 이벤트의 유형 (예: 'click', 'keydown')
function: 이벤트가 발생했을 때 실행될 콜백 함수
useCapture: 선택 사항으로, 이벤트가 캡처링 단계에서 발생할지를 결정 (기본값은 false)

2. 이벤트 리스너 등록 예시

다양한 이벤트 리스너를 등록하는 방법에 대한 예시를 살펴보겠습니다.

2.1. 클릭 이벤트 리스너

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

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

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

버튼을 클릭할 때마다 알림 창이 표시됩니다.

2.2. 마우스 오버 이벤트 리스너

<p id="myParagraph">Hover over this paragraph!</p>

<script>
  const paragraph = document.getElementById('myParagraph');

  paragraph.addEventListener('mouseover', () => {
      paragraph.style.color = 'red';  // 마우스 오버 시 텍스트 색상 변경
  });

  paragraph.addEventListener('mouseout', () => {
      paragraph.style.color = 'black';  // 마우스 아웃 시 원래 색상으로 변경
  });
</script>

마우스를 올리면 텍스트 색상이 빨간색으로 변경되고, 마우스를 떼면 다시 원래 색상으로 돌아갑니다.

2.3. 키보드 이벤트 리스너

<input type="text" id="myInput" placeholder="Type something...">

<script>
  const input = document.getElementById('myInput');

  input.addEventListener('keydown', (event) => {
      console.log(`Key pressed: ${event.key}`);  // 입력 중인 키를 콘솔에 출력
  });
</script>

입력 필드에서 키를 누르면 해당 키가 콘솔에 출력됩니다.

3. 이벤트 리스너의 제거

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

3.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>

이 예시에서는 버튼 클릭 시 알림을 표시하는 이벤트 리스너를 추가한 후, 특정 조건에서 제거하는 방법을 보여줍니다.

4. 이벤트 전파와 이벤트 위임

이벤트는 DOM 요소에서 부모 요소로 전파되는 과정을 거칩니다. 이 과정은 버블링과 캡처링으로 나뉘며, 이를 활용한 이벤트 위임 기법이 있습니다.

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);  // 캡처링 설정

이 설정을 통해 부모 요소가 먼저 클릭 이벤트를 감지하게 됩니다.

4.3. 이벤트 위임

이벤트 위임은 부모 요소에 이벤트 리스너를 추가하고, 자식 요소에서 발생한 이벤트를 감지하는 기법입니다. 이를 통해 동적으로 추가된 요소에도 이벤트 리스너를 적용할 수 있습니다.

<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>에 추가된 이벤트 리스너가 작동하여 클릭 이벤트를 감지합니다.

5. 이벤트 객체의 활용

이벤트 객체는 이벤트와 관련된 정보를 담고 있으며, 다양한 프로퍼티를 통해 이벤트의 세부 정보를 확인할 수 있습니다.

5.1. 주요 이벤트 객체 프로퍼티

event.type: 발생한 이벤트의 유형
event.target: 이벤트가 발생한 요소
event.currentTarget: 현재 이벤트 리스너가 부착된 요소
event.preventDefault(): 기본 동작을 방지하는 메서드
event.stopPropagation(): 이벤트 전파를 중지하는 메서드

5.2. 이벤트 객체 사용 예시

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

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

  button.addEventListener('click', (event) => {
      console.log(`Event Type: ${event.type}`); // 이벤트 유형 출력
      console.log(`Clicked Element: ${event.target.tagName}`); // 클릭된 요소 출력
      event.preventDefault(); // 기본 동작 방지 (예: 폼 제출 시)
  });
</script>

이벤트 객체를 사용하여 발생한 이벤트의 정보를 콘솔에 출력할 수 있습니다.

요약

JavaScript DOM Event Listener는 사용자와 웹 페이지 간의 상호작용을 처리하는 중요한 기능입니다. 이벤트 리스너를 사용하여 다양한 이벤트를 감지하고 처리함으로써 웹 애플리케이션의 동적인 기능을 구현할 수 있습니다.

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

JavaScript를 활용한 DOM 이벤트 처리는 사용자 경험을 향상시키고, 웹 애플리

케이션의 동적인 기능을 구현하는 데 필수적인 요소입니다.

코딩 스쿨 JavaScript