# register handler
[JS](/web/js.md) ⟩ [browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [handler](/web/browser/event/handler.md) ⟩ register
{% hint style="success" %}
* register an event (**function**) handler：
```javascript
// 1. by setting the "on" property
window.onload = function(){ ... };
// 2. by calling addEventListener()
elem.addEventListener("click", handler, opts);
```
* register an event [**object handler**](/web/browser/event/handler/register/object-handler.md)：
```javascript
elem.addEventListener('click', {
handleEvent(event) { ... } // ⭐️ required method
});
```
{% endhint %}
{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %} **Don’t**** ****use** `setAttribute` to assign handlers. **Attributes are always**** ****strings**, function becomes a string:exclamation:
```javascript
// a click on will generate errors.
elem.setAttribute('onclick', () => { ... });
```
{% endhint %}
{% hint style="danger" %}
For some events, handlers only work with addEventListener.
```javascript
document.onDOMContentLoaded = handler; // ❌ won't work❗️
document.addEventListener("DOMContentLoaded", handler) // ✅
```
{% endhint %}
{% endtab %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}
* The **third argument** to [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) is a **boolean** value or **object**. If you pass **true**, then the handler is registered as a [capturing handler](/web/browser/event/handler/register/capturing-handler.md).
```javascript
elem.addEventListener("click", handler, {
capture: true, // ⭐️ registered as a "capturing" handler.
once : true, // ⭐️ automatically removed after triggered once.
passive: true // ⭐️ can't cancel default actions.
});
```
{% endhint %}
{% hint style="danger" %} **Don’t use** [`setAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) **to ****register handlers****,** it won’t work:
```javascript
// ⭐️ attributes are ALWAYS strings❗️
// function will be converted to a string automatically.
document.body.setAttribute('onclick', function() { alert(1) });
```
{% endhint %}
{% endtab %}
{% tab title="🔴 主題" %}
* registering a
* [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 [**object**](/web/js/val/obj.md). ⭐️
* [remove handler](/web/browser/event/handler/remove.md)
{% endtab %}
{% tab title="💈範例" %}
* registering with [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
```javascript
let button = document.querySelector("#mybutton");
// ⭐ registering with `addEventListener()`
button.addEventListener("click", () => {
console.log("Thanks again!");
});
// ⭐ registering a "capturing" event handler
document.addEventListener("click", handleClick, true);
// ⭐ explicitly specifies the options
document.addEventListener("click", handleClick, {
capture: true, // ⭐ capturing handler
once : true, // ⭐ automatically removed after triggered once
passive: true // ⭐ can't cancel default actions
});
```
* registering handlers on event target's "on" properties (onclick, onchange, ...):
{% hint style="warning" %}
缺點：
* 針對特定的 event target + event type (如：windown.onload)，一次只能設定一個 event handler。
* 如果前面已經有設定一個 event handler，後面設定的 event handler 會蓋掉前面的。
{% endhint %}
```javascript
// ⭐ registering `window.onload`
// invoked when `document` is loaded
window.onload = function() {
// Look up a