# custom events

[JS](../../js) ⟩ [browser](..) ⟩ [events]() ⟩ custom events

{% tabs %}
{% tab title="🔴 主題" %}
* [event.istrusted](custom/event.istrusted "mention") - event comes from <mark style="color:green;">**browser**</mark> (<mark style="color:green;">**true**</mark>) or <mark style="color:red;">**script**</mark> (<mark style="color:red;">**false**</mark>).
* [bubbling](propagation/bubbling "mention")
{% endtab %}

{% tab title="💈範例" %}
```markup
<h1 id="h1">Hello for John!</h1>

<script>
  // catch on h1
  h1.addEventListener("hello", function(e) {
    console.log(e.detail.name);
  });

  // ⭐️ custom event
  let event = new CustomEvent("hello", {
    detail: { name: "John" }    // ⭐️ custom info in `detail` property
  });
  
  // dispatch on h1
  h1.dispatchEvent(event);
</script>
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩&#x20;
  * [ ] [Dispatching custom events](https://javascript.info/dispatch-events)
  * [ ] [MouseEvent, KeyboardEvent, ...](https://javascript.info/dispatch-events#mouseevent-keyboardevent-and-others)&#x20;
* [ ] JavaScript The Definitive Guide (15.2 Events)
{% endtab %}

{% tab title="📘 手冊" %}
* [Events](https://developer.mozilla.org/en-US/docs/Web/Events)
* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩
  * [Event( «event name», {bubbles: false, cancelable: false, composed: false} )](https://developer.mozilla.org/en-US/docs/Web/API/Event/Event)
* [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)
* [target.dispatchEvent(event)](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent)
{% endtab %}

{% tab title="👥 相關" %}
* [Events that Cross Shadow DOM Boundary](../../../component/shadow-dom/events/composed#custom-events) - event.composed
{% endtab %}
{% endtabs %}

