javascript - 如何使用代理对象捕获事件处理程序

Question

我想Proxy为所有点击事件注册设置一个捕获处理程序。

请考虑这个例子：

let docProxy= new Proxy(document, {
   get(target, name) {
    if (name === 'getElementById') {
        console.log(arguments[0]);
    }
    return typeof target[name] == "function"
        ? target[name].bind(target)
        : target[name];
  }
});

(function(document){

     document.getElementById("mybtn").onclick=function(){ alert("click")};

})(docProxy);

我试图在 上设置一个代理document，以便我可以获得任何元素的点击处理程序（在上面的示例中我想登录function(){ alert("click")}。我忽略了什么？

这是更新的代码。两个按钮 ( foo, mybtn) 的按钮 onclick 事件不会触发

let docProxy = new Proxy(document, {

    get:  (target, name, receiver) => {
        const origMethod = target[name];
        return function (...args) {
            let result = origMethod.apply( target, arguments );
            return new Proxy (result, {
                get: (obj, key, receiver) => {
                    if (key === 'addEventListener') {
                        return function() {
                            if (arguments[0] === 'click') {
                                console.log(arguments[1]);
                            }
                        }
                    }
                    return typeof obj[key] == "function"
                      ? obj[key].bind(obj)
                      : obj[key];                   
                },
                set: (obj, key, value) => {
                    if (key === 'onclick') {
                        console.log(value);
                    }
                }
            });
        };
    }
});

(function(document){
   
     document.getElementById("foo").addEventListener('click', function(){ alert("click")});
     document.getElementById("mybtn").onclick=function(){ alert("click")};

})(docProxy);

标签： javascriptproxyes6-proxy