為什么我不能將函數分配給Object.prototype.click？

Question

我知道如何創建動態元素並將它們附加到現有元素，以及如何創建單擊事件並附加它們。 請參閱下面的我的代碼段

 var container = document.getElementById("container"); var btn1 = document.createElement("button"); var btn2 = document.createElement("button"); btn1.innerHTML = "button 1"; btn2.innerHTML = "button 2"; btn1.onclick = function(){ console.log('button 1 clicked'); }; // this works fine btn2.onclick = function(){ console.log('button 2 clicked'); }; container.append(btn1); container.append(btn2); 

 <div id="container"></div> 

我試圖模仿jQuery的.click()行為。 （我不想使用jQuery，我只需要一種更短的方式將點擊事件分配給動態創建的元素）。

我的意思是，我想通過添加一個接受函數作為參數的函數來擴展Object.prototype ，它在幕后所做的就是將它分配給對象的.onclick屬性。

但是，代碼會運行，但不會觸發任何單擊事件，也不會報告錯誤。

 var container = document.getElementById("container"); var btn1 = document.createElement("button"); var btn2 = document.createElement("button"); btn1.click(function(){ console.log('button 1 clicked'); }); // this doesn't work btn2.click(function(){ console.log('button 2 clicked'); }); // this doesn't work btn1.innerHTML = "button 1"; btn2.innerHTML = "button 2"; container.append(btn1); container.append(btn2); Object.prototype.click = function(fn) { console.log('this function never gets executed'); this.onclick = fn; } 

 <div id="container"></div> 

我可以告訴我，我沒有執行Object.prototype.click擴展，因為console.log()從未發生過。

是因為Object.prototype.click被保留了嗎？ 如果是這樣，為什么我無法覆蓋其定義？

我究竟做錯了什么？

Answer 1

有兩個問題。 首先，你應該分配給原型你嘗試調用之前 btn1.click()否則本機 .click()將被調用。 （元素的本機.click()方法以編程方式觸發該元素上的click事件。）

另一個問題是btn1是一個元素 ，而不僅僅是一個對象，而HTMLElement在它們的原型上有一個click屬性。 因此，即使您分配給Object.prototype.click ， HTMLElement.prototype.click也會在原型鏈中更早出現，因此您的Object.prototype.click將被忽略。 您必須覆蓋HTMLElement.prototype.click或HTMLButtonElement.click ：

 var container = document.getElementById("container"); var btn1 = document.createElement("button"); var btn2 = document.createElement("button"); HTMLElement.prototype.click = function(fn) { console.log('setting up click event'); this.onclick = fn; } btn1.click(function(){ console.log('button 1 clicked'); }); btn2.click(function(){ console.log('button 2 clicked'); }); btn1.innerHTML = "button 1"; btn2.innerHTML = "button 2"; container.append(btn1); container.append(btn2); 

 <div id="container"></div> 

但改變這樣的內置對象並不是很好的做法，並且可能導致事情破壞（例如，如果庫假定.click()將觸發正常的HTMLElement.prototype.click函數） - 您可以考慮分配click屬性直接到實例 ，而不是原型：

 var container = document.getElementById("container"); function myCreateElement(type) { const elm = document.createElement(type); elm.click = function(fn) { console.log('setting up click event'); this.onclick = fn; } return elm; } var btn1 = myCreateElement("button"); var btn2 = myCreateElement("button"); btn1.click(function(){ console.log('button 1 clicked'); }); btn2.click(function(){ console.log('button 2 clicked'); }); btn1.innerHTML = "button 1"; btn2.innerHTML = "button 2"; container.append(btn1); container.append(btn2); 

 <div id="container"></div>