すべてのプロパティでセッターが呼ばれたときに処理を追加したい

Question

# すべてのプロパティでセッターが呼ばれたときに処理を追加したい

すべてのプロパティでセッターが呼ばれたときに処理を追加したいのですが、addEventListenerを経由するとうまくいきません。

```javascript
const Target = class {
  constructor(element) {
    this._element = element
    element.addEventListener('focus', this)
    element.addEventListener('blur', this)
  }
  get element() {
    return this._element
  }
  get active() {
    return !!this._active
  }
  set active(bool) {
    this._active = bool
  }
  handleEvent({ type }) {
    console.log(type + ' before', this.active)
    this.active = type === 'focus'
    console.log(type + ' after', this.active)
  }
}

const handler = {
  get(target, key) {
    return target[ key ]
  },
  set(target, key, value) {
    console.log('YES!', { target, key, value }) //何らかの処理
    target[ key ] = value
    return true
  }
}

const element = document.body.appendChild(document.createElement('textarea'))

const proxiedTarget = new Proxy(new Target(element), handler)

proxiedTarget.active = !proxiedTarget.active //OK

proxiedTarget.active = !proxiedTarget.active //OK

proxiedTarget.handleEvent({ type: 'focus' }) //OK //addEventListener用ですが確認のため直接実行

//クリック等で要素をフォーカス・ブラーさせてaddEventListener経由でhandleEventが実行されるとhandler.setが反応しない＞＜
```

上記の例ではプロパティは「active」一つだけですが実際は（継承元も含めて）たくさんあるのでProxyで一括処理できないかなと思いました。

が、handleEventメソッドを直接呼ぶ場合はメソッド内の「`this.active = type === 'focus'`」に反応して期待通りにhandlerの処理が行われるのですが、
addEventListener経由で呼ばれる場合はProxyにラップされていないのかhandlerの処理が行われません。
addEventListener経由でもトラップするにはどうすればいいですか？

あと、
```javascript
const proxiedTarget = new Proxy(new Target(element), handler)
```
ではなく
```javascript
const ProxiedTarget = new Proxy(Target, handler)
const proxiedTarget = new ProxiedTarget(element)
```
みたいにできますか？（Proxyのターゲットとしてインスタンスじゃなくクラスを渡しても実現可能ですか？）

やりたいことがもっと短いコードでかんたんに実現できるならProxyじゃなくても何でもいいです。

Accepted Answer

### 要件

鍵となる動作は

- 特定のイベントが発火時、特定のkey/value形式のデータを書き込む

これだけだと思います。
`new Proxy` を使用することで一部の動作を後回しに出来ますが、結局は上記紐付けデータをどこかに保存しておかなければなりません。
紐付けは `new Array` もしくは `new Map` をを使用すれば問題ないように思います。

### コード

gistにコードを、Plunkerにデモを置きました。

- [fired-event.js - GitHub gist](https://gist.github.com/think49/fa8a4d3c3fd0bbcfedde622e9c67fce0)
- [Plunker - fired-event.jsのデモ](https://plnkr.co/edit/xmyjzVCjGuhOo6we?open=fired-event-1.0.2.js&preview)

Re: _._ さん

Answer

すみません。これでいけている気がします。

（本題ではありませんが誤解を生んでいた擬似的なプライベートフィールドも書き直しました。）

```javascript
const Target = class {
  #element
  #active
  constructor(element) {
    this.#element = element
    element.addEventListener('focus', this)
    element.addEventListener('blur', this)
  }
  get element() {
    return this.#element
  }
  get active() {
    return !!this.#active
  }
  set active(bool) {
    this.#active = bool
  }
  handleEvent({ type }) {
    console.log(type + ' before', this.active)
    this.active = type === 'focus'
    console.log(type + ' after', this.active)
  }
}

const handler = {
  get(target, key, receiver) {
    return target[ key ]
  },
  set(target, key, value, receiver) {
    console.log('YES!', { target, key, value, receiver }) //何らかの処理
    target[ key ] = value
    return true
  }
}

const element = document.body.appendChild(document.createElement('textarea'))

const target = new Target(element)
const proxiedTarget = new Proxy(target, handler)
target.handleEvent = target.handleEvent.bind(proxiedTarget) //追加！

proxiedTarget.active = !proxiedTarget.active

proxiedTarget.active = !proxiedTarget.active

proxiedTarget.handleEvent({ type: 'focus' })
```

すべてのプロパティでセッターが呼ばれたときに処理を追加したい

要件

コード

関連した質問