Click處理程序失去參考創建它

「這個」對象我做了JS腳本：Click處理程序失去參考創建它

var zzz; 
zzz = { 
    fff: function (Id) { 
     alert("You did it! Id="+Id); 
    }, 
    main: function (Id) { 
     var button, elements; 
     button = document.createElement("input"); 
     button.type = "submit"; 
     button.onclick = function() { 
      zzz.fff(Id); 
     }; 
     elements = document.getElementById(Id); 
     elements.appendChild(button); 
    } 
};

和HTML，在那裏我測試了它：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> 
     <title>My Web Page!</title> 
     <script type="text/javascript" src="test.js"></script> 
    </head> 

    <body> 
     <div id="div001"></div> 
     <div id="div002"></div> 
     <script type="text/javascript"> 
      object1 = zzz; 
      object1.main("div001"); 
      object2 = zzz; 
      object2.main("div002"); 
     </script> 
    </body> 

</html>

爲什麼它只能如果我寫button.onclick = function() { zzz.fff(Id); };並與this.fff(Id)它不起作用？

來源

2013-01-23 zaarcis

'this'會在'main'的範圍內。因此，它不會工作 – karthikr

MDN有一個很大的部分關於'this' https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/這個 – jholloman

哇，謝謝你的好鏈接，@ jholloman！ – zaarcis

當您綁定的事件處理程序（如onclick），該處理程序this內部變成觸發事件（除非如果使用內聯onclick=""屬性，應當避免）的元素。

而不是使用zzz的，你也可以複製this另一個變量，將通過封閉可用的處理程序中：

var that = this; 
button.onclick = function() { 
    that.fff(Id); 
};

或者你可以使用Function.prototype.bind：

var clickHandler = button.onclick = function() { 
    this.fff(Id); 
}; 
button.onclick = clickHandler.bind(this);

來源

2013-01-23 20:21:35 bfavaretto

謝謝。也會讀到'Function.prototype.bind'。它似乎更普遍。 – zaarcis

@IlmārsCīrulis舊版瀏覽器不支持此功能，但MDN頁面包含（簡化）填充程序。 – bfavaretto

Click處理程序失去參考創建它

回答

相關問題