Javascript onclick 代理

Question

我要代理onclick事件

这是我尝试过的：

HTMLElement.prototype.onclick = new Proxy(HTMLElement.prototype.onclick, {
  set: (target, thisArgs, argsList) => {
    console.log(thisArgs)
    return target.apply(thisArgs, argsList)
  }
}

使用 apply: 陷阱，我可以使用上面的代码来代理 getElementById。但是，当我尝试代理 onclick 时，出现 Illegal invocation 错误。我该如何修复我的代码？

Answer 1

HTMLElement.prototype.onclick 是一个 getter/setter。当你引用

HTMLElement.prototype.onclick

您使用 HTMLElement.prototype 的调用上下文调用 getter - 但 getter 需要 实际元素的调用上下文 , 所以它抛出。

您可以改用 Object.defineProperty - 看起来不需要代理，只需拦截调用：

const { get, set } = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'onclick');
Object.defineProperty(HTMLElement.prototype, 'onclick', {
  set: function(newHandler) {
    console.log(newHandler)
    return set.call(this, newHandler)
  },
  get
});

document.body.onclick = () => console.log('foo');

click

Javascript onclick 代理

Javascript onclick proxy

javascript

proxy

es6-proxy