다트의 dart:html 라이브러리에서 이벤트 처리 방법은?

Q1: 다트의 `dart:html` 라이브러리에서 이벤트를 처리하려면 어떻게 하나요?
A1: `dart:html` 라이브러리에서는 HTML 요소의 이벤트 리스너를 `Element` 클래스의 `on` 접두사를 가진 프로퍼티들을 통해 처리합니다. 예를 들어, 버튼 클릭 이벤트는 `onClick`을 사용하여 처리할 수 있습니다.

```dart
import 'dart:html';

void main() {
ButtonElement button = querySelector(' myButton')!;
button.onClick.listen((MouseEvent event) {
print('버튼이 클릭되었습니다!');
});
}
```

---

Q2: 이벤트 리스너를 여러 개 등록할 수 있나요?
A2: 네, 같은 이벤트에 대해 여러 개의 리스너를 등록할 수 있습니다. 각 리스너는 순서대로 호출됩니다.

```dart
element.onClick.listen((event) => print('첫 번째 리스너'));
element.onClick.listen((event) => print('두 번째 리스너'));
```

---

Q3: 이벤트 리스너를 제거하려면 어떻게 해야 하나요?
A3: `StreamSubscription` 객체를 저장한 후 `cancel()` 메서드를 호출하면 이벤트 리스너를 제거할 수 있습니다.

```dart
var subscription = element.onClick.listen((event) => print('리스너'));
subscription.cancel(); // 리스너 제거
```

---

Q4: 이벤트 객체인 `Event`에서 어떤 정보를 얻을 수 있나요?
A4: `Event` 객체는 이벤트의 기본 정보를 담고 있으며, 이를 상속한 `MouseEvent`, `KeyboardEvent` 등으로 구체적인 정보(마우스 좌표, 키 코드 등)를 가져올 수 있습니다.

```dart
element.onClick.listen((MouseEvent event) {
print('클릭한 좌표: (${event.client.x}, ${event.client.y})');
}); ```

---

Q5: 모든 이벤트 타입을 확인하려면 어떻게 해야 하나요?
A5: `Element` 클래스에서는 다양한 이벤트 스트림 프로퍼티(`onClick`, `onMouseOver`, `onKeyDown` 등)를 제공합니다. 전체 리스트는 [Dart API 문서](https://api.dart.dev/stable/dart-html/Element-class.html)에서 확인할 수 있습니다.

---

Q6: 이벤트 캡처링(capturing)과 버블링(bubbling)은 어떻게 처리하나요?
A6: `dart:html`의 표준 이벤트 모델은 기본적으로 버블링을 지원하지만 캡처링 단계에서 리스너를 등록하는 직접적인 방법은 제공하지 않습니다. 복잡한 이벤트 위임이나 캡처링이 필요하면 자바스크립트 interop을 사용해야 합니다.

---

Q7: 커스텀 이벤트를 생성하고 처리할 수 있나요?
A7: 예, `CustomEvent`를 생성하여 디스패치(dispatch)하고, 다른 곳에서는 해당 커스텀 이벤트를 리스닝할 수 있습니다.

```dart
import 'dart:html';

void main() {
var div = DivElement();
div.on['my-event'].listen((Event e) {
print('커스텀 이벤트 발생');
});

var customEvent = CustomEvent('my-event', detail: {'data': 123});
div.dispatchEvent(customEvent);
}
```

---

Q8: 이벤트 처리를 위해 jQuery 같은 라이브러리 없이 순수 다트만 사용할 수 있나요?
A8: 네, `dart:html` 라이브러리는 순수 Dart 코드로 DOM 조작과 이벤트 처리를 지원하며, 별도의 JS 라이브러리 없이 이벤트 리스닝 및 처리 작업을 간편하게 수행할 수 있습니다.

---

요약:
- `element.onEventType.listen((event) { ... })` 패턴으로 이벤트를 처리한다.
- 리스너는 `StreamSubscription` 형태로 관리 가능하며, `cancel()`로 해제한다.
- 이벤트 객체를 통해 상세 정보나 이벤트 타입을 알 수 있다.
- 커스텀 이벤트 생성과 디스패치도 지원한다.
- 캡처링 이벤트 처리 기능은 제한적이며, 필요하면 JS interop을 활용한다.

Dart의 `dart:html` 라이브러리는 웹 애플리케이션을 개발할 때 HTML 문서와 상호작용할 수 있는 기능을 제공합니다.

이 라이브러리를 사용하면 DOM(Document Object Model) 요소에 접근하고, 이벤트를 처리하며, 웹 페이지의 내용을 동적으로 변경할 수 있습니다.

이벤트 처리는 사용자와의 상호작용을 관리하는 중요한 부분입니다.

아래에서는 Dart에서 이벤트를 처리하는 방법에 대해 자세히 설명하겠습니다.

1. 이벤트 리스너 추가하기 이벤트 리스너는 특정 이벤트가 발생했을 때 호출되는 함수입니다.

Dart에서는 `addEventListener` 메서드를 사용하여 이벤트 리스너를 추가할 수 있습니다.

예를 들어, 버튼 클릭 이벤트를 처리하는 방법은 다음과 같습니다.

```dart import 'dart:html'; void main() { // 버튼 요소를 선택합니다.

ButtonElement button = querySelector(' myButton') as ButtonElement; // 클릭 이벤트 리스너를 추가합니다.

button.onClick.listen((MouseEvent event) { print('버튼이 클릭되었습니다!'); }); } ``` 위의 코드에서 `querySelector`를 사용하여 HTML 문서에서 버튼 요소를 선택하고, `onClick` 속성을 통해 클릭 이벤트에 대한 리스너를 추가합니다.

`listen` 메서드는 이벤트가 발생할 때마다 호출될 함수를 등록합니다.



2. 다양한 이벤트 처리 Dart에서는 다양한 이벤트를 처리할 수 있습니다.

예를 들어, 마우스 이벤트, 키보드 이벤트, 폼 이벤트 등 여러 종류의 이벤트를 다룰 수 있습니다.

마우스 이벤트 ```dart Element element = querySelector(' myElement'); element.onMouseOver.listen((MouseEvent event) { print('마우스가 요소 위에 있습니다.

'); }); element.onMouseOut.listen((MouseEvent event) { print('마우스가 요소를 떠났습니다.

'); }); ``` 키보드 이벤트 ```dart InputElement input = querySelector(' myInput'); input.onKeyUp.listen((KeyboardEvent event) { print('키가 눌렸습니다: ${event.key}'); }); ``` 폼 이벤트 ```dart FormElement form = querySelector(' myForm'); form.onSubmit.listen((Event event) { event.preventDefault(); // 기본 제출 동작을 방지합니다.

print('폼이 제출되었습니다.

'); }); ```

3. 이벤트 객체 이벤트 리스너에 전달되는 이벤트 객체는 이벤트에 대한 정보를 포함하고 있습니다.

예를 들어, 마우스 클릭 이벤트의 경우 `MouseEvent` 객체를 통해 클릭 위치, 버튼 정보 등을 알 수 있습니다.

```dart button.onClick.listen((MouseEvent event) { print('클릭 위치: (${event.client.x}, ${event.client.y})'); }); ```

4. 이벤트 제거 이벤트 리스너를 추가한 후에는 필요에 따라 제거할 수도 있습니다.

이를 위해서는 리스너를 변수에 저장하고, `removeEventListener` 메서드를 사용하여 제거합니다.

```dart void handleClick(MouseEvent event) { print('버튼이 클릭되었습니다!'); } void main() { ButtonElement button = querySelector(' myButton') as ButtonElement; // 이벤트 리스너 추가 button.onClick.listen(handleClick); // 특정 조건에서 이벤트 리스너 제거 button.onMouseOut.listen((MouseEvent event) { button.onClick.listen((MouseEvent event) { print('이벤트 리스너가 제거되었습니다.

'); }); }); } ```

5. 이벤트 전파와 버블링 이벤트는 DOM 트리에서 전파되는 방식이 있습니다.

이벤트가 발생하면 해당 요소에서 시작하여 부모 요소로 전파되는 '버블링' 방식이 기본입니다.

이를 통해 부모 요소에서도 자식 요소의 이벤트를 처리할 수 있습니다.

```dart DivElement parent = querySelector(' parent'); DivElement child = querySelector(' child'); parent.onClick.listen((MouseEvent event) { print('부모 요소 클릭'); }); child.onClick.listen((MouseEvent event) { print('자식 요소 클릭'); }); ``` 위의 예제에서 자식 요소를 클릭하면 '자식 요소 클릭'과 '부모 요소 클릭'이 모두 출력됩니다.



6. Dart의 `dart:html` 라이브러리를 사용하면 웹 애플리케이션에서 다양한 이벤트를 쉽게 처리할 수 있습니다.

이벤트 리스너를 추가하고, 이벤트 객체를 활용하여 사용자와의 상호작용을 관리하며, 필요에 따라 이벤트를 제거할 수 있습니다.

이러한 기능을 통해 더욱 동적이고 반응적인 웹 애플리케이션을 개발할 수 있습니다.