> 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/handler.md).

# event handler

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

{% hint style="success" %}
event (<mark style="color:yellow;">**function**</mark>) handler

* <mark style="color:orange;">**argument**</mark>：an [Event](/web/browser/event.md) object.
* [<mark style="color:orange;">**invocation context**</mark>](/web/browser/event/handler/context.md)：
  * <mark style="color:blue;">`this`</mark> refers to the object on which the <mark style="color:yellow;">**handler was registered**</mark>.
* [<mark style="color:orange;">**return value**</mark>](/web/browser/event/handler/return-value.md)： \
  In modern JavaScript, event handlers <mark style="color:yellow;">**should**</mark>**&#x20;**<mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**return anything**</mark>.
  {% endhint %}

{% hint style="warning" %}
event handler can also be an <mark style="color:yellow;">**object**</mark> -  👉 see: [object handler](/web/browser/event/handler/register/object-handler.md)
{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
[**Window**](/web/browser/dom/type/window.md)**-**<mark style="color:yellow;">**reflecting**</mark> <mark style="color:orange;">**body**</mark> element [**event handlers**](/web/browser/event/handler.md)：

if you assign one of the following event handlers on [document.body](https://developer.mozilla.org/en-US/docs/Web/API/Document/body), it will be reflected on [window](/web/browser/dom/type/window.md) too, and vice versa.&#x20;

* <mark style="color:yellow;">**onblur**</mark>, <mark style="color:yellow;">**onerror**</mark>, <mark style="color:yellow;">**onfocus**</mark>, <mark style="color:yellow;">**onload**</mark>, <mark style="color:yellow;">**onresize**</mark>, <mark style="color:yellow;">**onscroll**</mark>

```javascript
const body = document.body;
body.onblur = function f(){};        // assigned on body
window.onblur                        // f: reflected on window

window.onresize = function g(){};    // assigned on window
body.onresize                        // g: reflected on body
```

📗  [Medium](https://medium.com/@mingjunlu/window-onscroll-vs-document-body-onscroll-9c331bb8d298)
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [invocation context](/web/browser/event/handler/context.md) of an event handler.
* [return value](/web/browser/event/handler/return-value.md) of an event handler.
* ["this" in event handler](/web/browser/event/handler/this.md)
* [register handler](/web/browser/event/handler/register.md)
  * [capturing handler](/web/browser/event/handler/register/capturing-handler.md)
  * [object handler](/web/browser/event/handler/register/object-handler.md) - event handler can be an <mark style="color:yellow;">**object**</mark>.
* [event propagation](/web/browser/event/propagation.md)
* [remove handler](/web/browser/event/handler/remove.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JavaScript The Definitive Guide (15.2 Events)
* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html)
  {% endtab %}

{% tab title="👥 相關" %}

* invoked with an [Event](/web/browser/event.md) object as **single argument**.
  {% endtab %}
  {% endtabs %}