# object handler

[JS](../../../../js) ⟩ [browser](../../..) ⟩ [event](../..) ⟩ [handler](..) ⟩ [register]() ⟩ 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](../../../../js/val/class "mention") 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-.](../../../../js/val/obj/prop/access/optional-invocation-. "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩ [object handlers](https://javascript.info/introduction-browser-events#object-handlers-handleevent)
{% endtab %}
{% endtabs %}
