javascript - 如何在 javascript 中将 document.getElementById.onclick 别名为 d.id.c？

Question

我想为 javascript 函数添加别名: I have readfrom this

我想将document.getElementById.onclick别名为d.id.c

我尝试过:

var d = document;
d['i'] = d.getElementById.bind(d);
d.i['c'] = d.i.onclick.bind(d.i);

HTML:

<div id="myid">Button</div>

Javascript:

d.i("myid").onclick = function(){
   alert("clicked"); // Working well
} 

// but

d.i("myid").c = function(){
   alert("clicked"); // not working
}

请帮助我!谢谢

Answer 1

您不需要改变内置 document对象 - 相反，您可以创建一个独立变量 d其中有 i方法，当传递 id 时，调用document.getElementById(id)并返回一个带有 c 的对象二传手。当调用setter时，分配元素的onclick传递的处理程序的属性:

const d = {
  i(id) {
    const elm = document.getElementById(id);
    return {
      set c(handler) {
        elm.onclick = handler;
      }
    }
  }
};

d.i("myid").c = function() {
  console.log("clicked");
}

<div id="myid">Button</div>

如果您除了使用 .c = <handler> 之外还希望能够访问元素的标准属性 ，然后使用Object.create在元素上，并返回该新对象:

const d = {
  i(id) {
    const elm = document.getElementById(id);
    const obj = Object.create(elm);
    Object.defineProperty(obj, 'c', {
      set(handler) {
        elm.onclick = handler;
      }
    });
    return obj;
  }
};

d.i("myid").c = function() {
  console.log("clicked");
}

<div id="myid">Button</div>

(从技术上讲，您也可以只在 elm 本身上定义属性，但这在异常情况下可能会导致问题，例如其他脚本依赖于自定义 c 属性，因此 Object.create )