# invocation context

[browser](../..) ⟩ [event](..) ⟩ [handler]() ⟩ invocation context

{% hint style="success" %}
invocation context：\
<mark style="color:blue;">`this`</mark> refers to the object on which the <mark style="color:yellow;">**handler was registered**</mark>.\

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
<mark style="color:blue;">`this`</mark> === [event.currentTarget](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget) unless the handler is an [arrow](../../../js/val/func/arrow "mention"), or its <mark style="color:purple;">`this`</mark> is <mark style="color:yellow;">**bound**</mark> to something else.
{% endhint %}
{% 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 %}
{% endtabs %}
