> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event.md).

# Event

[browser](/web/browser.md) ⟩ event

{% hint style="success" %}
the [**object**](/web/js/val/obj.md) that 

* 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**](/web/browser/event/handler.md).&#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) -  [event.type](/web/browser/event/.type.md).
* <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>. ([event.target](/web/browser/event/target.md))&#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="🔴 主題" %}

* [event.type](/web/browser/event/.type.md) - "<mark style="color:purple;">`load`</mark>", "<mark style="color:purple;">`click`</mark>", "[<mark style="color:purple;">`transitioned`</mark>](/web/browser/event/type/css-events.md)" ...
* [event.target](/web/browser/event/target.md)
* [event dispatching](/web/browser/event/dispatch.md)
* [default action](/web/browser/event/default-action.md)
  * [hide or not to hide?](/web/browser/event/default-action/hide-or-not-to-hide.md)
* [event handler](/web/browser/event/handler.md)&#x20;
  * [register handler](/web/browser/event/handler/register.md)
  * [invocation context](/web/browser/event/handler/context.md)
* [event propagation](/web/browser/event/propagation.md)
  * [bubbling phase](/web/browser/event/propagation/bubbling.md)
  * [stop propagation](/web/browser/event/propagation/stop.md)
* [custom events](/web/browser/event/custom.md)
* ["change" event](/web/browser/event/change-event.md)
  {% 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 in Shadow DOM](/web/component/shadow-dom/events/bubbling.md)
* [DOM hierarchy](/web/browser/dom/hierarchy.md)
  {% endtab %}
  {% endtabs %}