# Event

[browser]() ⟩ event

{% hint style="success" %}
the [**object**](../js/val/obj) that&#x20;

* is <mark style="color:yellow;">**asscociated with a particular event**</mark>&#x20;
* <mark style="color:yellow;">**contains details**</mark> about that event
* is passed <mark style="color:yellow;">**as an argument**</mark> to the [**event handler**](event/handler).&#x20;
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}
<mark style="color:yellow;">**properties**</mark> of an Event object

* <mark style="color:purple;">`type`</mark> (string) -  [.type](event/.type "mention").
* <mark style="color:purple;">`target`</mark> ([EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)) -\
  object on which the event <mark style="color:yellow;">**occurred**</mark>. ([target](event/target "mention"))&#x20;
* <mark style="color:purple;">`currentTarget`</mark> ([EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)) - \
  the **object** on which the <mark style="color:yellow;">**current handler was registered**</mark>. \
  (in the handler, <mark style="color:blue;">`this`</mark> === event.[currentTarget](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget).)
* <mark style="color:purple;">`timeStamp`</mark> - **relative** timestamp (in ms).
* <mark style="color:purple;">`isTrusted`</mark> - event dispatched by <mark style="color:yellow;">**browser**</mark> (<mark style="color:green;">`true`</mark>) or <mark style="color:yellow;">**script**</mark> (<mark style="color:red;">`false`</mark>).
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [.type](event/.type "mention") - "<mark style="color:purple;">`load`</mark>", "<mark style="color:purple;">`click`</mark>", "[<mark style="color:purple;">`transitioned`</mark>](event/type/css-events)" ...
* [target](event/target "mention")
* [dispatch](event/dispatch "mention")
* [default-action](event/default-action "mention")
  * [hide-or-not-to-hide](event/default-action/hide-or-not-to-hide "mention")
* [handler](event/handler "mention")&#x20;
  * [register](event/handler/register "mention")
  * [context](event/handler/context "mention")
* [propagation](event/propagation "mention")
  * [bubbling](event/propagation/bubbling "mention")
  * [stop](event/propagation/stop "mention")
* [custom](event/custom "mention")
* [change-event](event/change-event "mention")
{% endtab %}

{% tab title="💈範例" %}
* replit ⟩&#x20;
  * [event.currentTarget](https://replit.com/@pegasusroe/eventcurrentTarget#script.js)
  * ["this" in event handler](https://replit.com/@pegasusroe/this-in-event-handler#script.js) (<mark style="color:blue;">`this`</mark> === event.[currentTarget](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget) )
{% endtab %}

{% tab title="📗 參考" %}
* [x] JavaScript The Definitive Guide (15.2 Events)
* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html)
* [ ] JS.info ⟩ [Browser: Document, Events, Interfaces](https://javascript.info/ui) ⟩ [Introduction to Events](https://javascript.info/events)
* [ ] [An Introduction To DOM Events](https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/)
{% endtab %}

{% tab title="📘 手冊" %}
* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩
  * [.currentTarget](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget)
{% endtab %}

{% tab title="👥 相關" %}
* [bubbling](../component/shadow-dom/events/bubbling "mention")
* [hierarchy](dom/hierarchy "mention")
{% endtab %}
{% endtabs %}
