[html] 웹 컴포넌트 이벤트 처리

22 Dec 2023

html

이번에는 HTML 웹 컴포넌트에서 이벤트를 처리하는 방법에 대해 알아보겠습니다. 웹 컴포넌트는 독립적으로 스타일링되고 동작하는 웹 요소입니다. 이러한 웹 컴포넌트는 사용하기 편리하며 재사용성이 뛰어나다는 장점이 있습니다.

1. 이벤트 핸들링

HTML 웹 컴포넌트에서 이벤트를 처리하는 방법은 일반적인 HTML 요소와 동일합니다.

class CustomButton extends HTMLElement {
  constructor() {
    super();
    this.addEventListener('click', this.handleClick);
  }

  handleClick(event) {
    alert('버튼이 클릭되었습니다.');
  }
}

customElements.define('custom-button', CustomButton);

위 예제에서는 CustomButton 클래스의 생성자에서 addEventListener 메소드를 사용하여 ‘click’ 이벤트에 handleClick 메소드를 연결했습니다.

2. 커스텀 이벤트

웹 컴포넌트에서 사용자 정의 이벤트를 만들고 발생시킬 수 있습니다.

class CommunicationBox extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.addEventListener('message', this.handleMessage);
  }

  handleMessage(event) {
    alert(`메시지 수신: ${event.detail}`);
  }

  sendMessage(message) {
    const event = new CustomEvent('message', { detail: message });
    this.dispatchEvent(event);
  }
}

customElements.define('communication-box', CommunicationBox);

위 예제에서 sendMessage 메소드는 CustomEvent를 생성하고 dispatchEvent를 사용하여 ‘message’ 커스텀 이벤트를 발생시킵니다.

3. 이벤트 위임

웹 컴포넌트에서 이벤트 위임을 통해 여러 하위 요소의 이벤트를 하나의 상위 요소에서 처리할 수 있습니다.

<custom-list>
  <custom-item>아이템 1</custom-item>
  <custom-item>아이템 2</custom-item>
  <custom-item>아이템 3</custom-item>
</custom-list>

class CustomList extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.addEventListener('click', this.handleClick);
  }

  handleClick(event) {
    if (event.target.tagName === 'CUSTOM-ITEM') {
      alert(`선택된 아이템: ${event.target.textContent}`);
    }
  }
}

customElements.define('custom-list', CustomList);

class CustomItem extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('custom-item', CustomItem);

위 예제에서 부모 요소인 CustomList에서 하위 요소인 CustomItem의 클릭 이벤트를 처리하고 있습니다.

HTML 웹 컴포넌트에서 이벤트 처리에 대해 간단히 살펴보았습니다. 웹 컴포넌트의 재사용성과 모듈화를 고려하여 이벤트 처리 방식을 설계하는 것이 중요합니다.