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

# object handler

[JS](/web/js.md) ⟩ [browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [handler](/web/browser/event/handler.md) ⟩ [register](/web/browser/event/handler/register.md) ⟩ object handler

{% hint style="success" %}
delegate event handling to an <mark style="color:yellow;">**object**</mark>：

```javascript
elem.addEventListener('click', {
    // calls handleEvent(event) in case of an event.
    handleEvent(event) { ... }    // ⭐️ required method
});
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
could also use a [class](/web/js/val/class.md) instance for that:
{% endhint %}

```javascript
class Menu {
    // ⭐️ required method
    handleEvent(event) {
      switch(event.type) {
        case 'mousedown': ...; break;
        case 'mouseup'  : ...; break;
      }
    }
    // other methods/properties ...
}

// Menu can also be written like this:
class Menu {

    // ⭐️ required method
    handleEvent(event) {
      const methodName = "on" + event.type;  // onmousedown, onmouseup ...
      this[methodName] ?. (event);           // optional invocation
    }
    
    // methods for individual event
    onmousedown(event){ ... }
    onmouseup  (event){ ... }
}

let menu = new Menu();    // object handler

elem.addEventListener('mousedown', menu);
elem.addEventListener('mouseup'  , menu);
```

{% endtab %}

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

* [optional invocation ?.()](/web/js/val/obj/prop/access/optional-invocation-..md)
  {% endtab %}

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

* [ ] JS.info ⟩ [object handlers](https://javascript.info/introduction-browser-events#object-handlers-handleevent)
  {% endtab %}
  {% endtabs %}