이벤트 생성 및 트리거
============

이 문서에서는 DOM 이벤트를 생성하고 전송하는 방법을 설명합니다. 이러한 이벤트들은 브라우저 자체에서 발생하는 이벤트와 달리 일반적으로 **합성 이벤트**라고 불립니다.

커스텀 이벤트 생성
----------

이벤트는 `Event` 생성자를 사용하여 다음과 같이 생성될 수 있습니다.


```js
const event = new Event("build");

// 이벤트를 수신합니다.
elem.addEventListener(
  "build",
  (e) => {
    /\* … \*/
  },
  false,
);

// 이벤트를 전송합니다.
elem.dispatchEvent(event);
```


위의 코드 예제는 EventTarget.dispatchEvent() 메서드를 사용합니다.

이 생성자는 대부분의 최신 브라우저에서 지원됩니다. 좀 더 장황한 접근 방법은 아래의 구식 방법을 참고하시길 바랍니다.

### 커스텀 데이터 추가 - CustomEvent()

이벤트 객체에 더 많은 데이터를 추가하기 위해 CustomEvent 인터페이스가 존재하며 커스텀 데이터를 전달하기 위해 **상세** 속성이 사용될 수 있습니다. 예를 들어 이벤트는 다음과 같이 생성될 수 있습니다.


```js
const event = new CustomEvent("build", { detail: elem.dataset.time });
```


그러면 이벤트 수신기의 추가 데이터에 접근할 수 있습니다.


```js
function eventHandler(e) {
  console.log(`The time is: ${e.detail}`);
}
```

### 구식 방법

이벤트를 생성하는 오래된 접근 방식은 Java에서 영감을 받은 API를 사용합니다. 다음은 `document.createEvent()`을 사용한 예제입니다.


```js
// 이벤트를 생성합니다.
const event = document.createEvent("Event");

// 이벤트 이름을 'build'로 정의합니다.
event.initEvent("build", true, true);

// 이벤트를 수신합니다.
elem.addEventListener(
  "build",
  (e) => {
    // e.target은 elem과 일치합니다.
  },
  false,
);

// 대상은 임의의 요소 혹은 다른 EventTarget일 수 있습니다.
elem.dispatchEvent(event);
```

### 이벤트 버블링

보통 하위 요소에서 이벤트를 트리거하고 상위 요소가 이벤트를 탐지하도록 하는 것이 바람직합니다. 선택적으로 다음과 같은 데이터를 사용합니다.


```html
<form>
  <textarea></textarea>
</form>
```



```js
const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

// 새로운 이벤트를 생성하고 버블링을 허용하며 "detail" 속성에 전달할 모든 데이터를 제공합니다.
const eventAwesome = new CustomEvent("awesome", {
  bubbles: true,
  detail: { text: () => textarea.value },
});

// 폼 요소는 사용자 지정 "awesome" 이벤트를 수신한 다음 전달된 text() 메서드의 결과를 콘솔에 출력합니다.
form.addEventListener("awesome", (e) => console.log(e.detail.text()));

// 사용자가 입력할 때 폼 내부의 텍스트 영역은 발생한 이벤트를 전송 및 트리거하여 시작점으로 사용합니다.
textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));
```

### 동적으로 이벤트 생성 및 전송

요소는 아직 생성되지 않은 이벤트를 수신할 수 있습니다.


```html
<form>
  <textarea></textarea>
</form>
```



```js
const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

form.addEventListener("awesome", (e) => console.log(e.detail.text()));

textarea.addEventListener("input", function () {
  // 이벤트를 즉시 생성하고 전송 및 트리거합니다.
  // 참고: 선택적으로 "함수 표현식"("화살표 함수 표현식" 대신)을 활용하여 "this"가 요소를 나타냅니다.
  this.dispatchEvent(
    new CustomEvent("awesome", {
      bubbles: true,
      detail: { text: () => textarea.value },
    }),
  );
});
```

기본 제공 이벤트 트리거
-------------

이 예제는 DOM 메서드를 사용하여 체크박스의 클릭(프로그램적으로 클릭 이벤트 생성)을 시뮬레이션하는 것을 설명합니다. 실행 중인 예제를 봅니다.


```js
function simulateClick() {
  const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  const cb = document.getElementById("checkbox");
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // preventDefault 핸들러.
    alert("cancelled");
  } else {
    // preventDefault 핸들러 없음.
    alert("not cancelled");
  }
}
```

같이 보기
-----

* CustomEvent()
* `Event.createEvent()`
* `Event.initEvent()` (en-US)
* `EventTarget.dispatchEvent()`
* `EventTarget.addEventListener()`