JavaScript的onclick事件調用對象

Question

可能重複：
How do I pass the this context into an event handler?

我做一個JavaScript相關的任務和我需要使該assocated與特定輸入日曆。

日曆不斷顯示，不隱瞞，等

可以有指向不同的文本字段多個日曆。

現在，每個日曆是一個JavaScript對象創建的，即

var cal1=new Calendar("inputfield_id"); 

現在日曆對象有我需要的點擊日曆時訪問某些變量。

所以基本上，我的問題是，有沒有辦法爲onclick事件獲取特定的對象，即在某個對象中以某種方式獲取「this」變量。

---

繼承人的代碼的一小部分來解釋什麼，我試圖做

function calendar(id){ 
    this.date=new Date(); 
    this.id=id; 
    this.next_year=function(){ 
     this.date.setFullYear(this.date.getFullYear()+1); 
     alert(this.date);//basically i want to get object context here to change date 
    } 

    var temp_but=document.createElement("button").onclick=this.next_year; 
    document.getElementById(id+"_div").appendChild(temp_but); 
    document.getElementById(id+"_div").lastChild.onclick=this.next_year; 

} 

基本上，在this.nextyear功能，我想對象上下文相應地獲取日期和改變日曆。

Answer 1

我覺得這是你希望做什麼？

function calendar(id){ 
    this.date=new Date(); 
    this.id=id; 
    var context = this; 
    this.next_year=function(){ 
     context.date.setFullYear(context.date.getFullYear()+1); 
     alert(context.date);//basically i want to get object context here to change date 
    } 

    var temp_but=document.createElement("button").onclick=this.next_year; 
    document.getElementById(id+"_div").appendChild(temp_but); 
    document.getElementById(id+"_div").lastChild.onclick=this.next_year; 

} 

從本質上講，我們使用一個封閉保存到this參考稱爲context。 this.next_year現在通過context引用了日曆對象。

---

編輯：一個小的JS教訓迴應評論OP張貼。

---

當調用一個函數作爲構造（即newcalendar("example")），則創建一個新的空對象和功能在新的空對象的上下文中執行。

注意：這不是真的只是一個空的對象。這是一個空洞的對象，在原型繼承等事物背後有一些內部指針。

Anywho！在整個函數中，任何對此的引用都是指當前的上下文。而且，因爲當您使用函數作爲構造函數時，它會在新創建的對象的上下文中調用函數，您可以使用this.someProperty來設置對象的屬性。

當您執行語句var cal1=new calendar("inputfield_id");時，會創建一個新對象，並且您的函數calendar會在所述對象的上下文中執行。因此，this.date=new Date();和this.id=id正在設置新日曆對象的date和id屬性。

我假設你實際上並不難理解這裏發生了什麼：this.id=id;，而是爲什麼this關鍵字在this.next_year中不起作用。

讓我們從一個可行的場景開始。如果您打電話給cal1.next_year();，您將在cal1的背景下撥打next_year()，因此this.date.setFullYear(this.date.getFullYear()+1);會按預期將cal1的日期屬性增加1年。

它不是在單擊事件處理程序中工作，因爲當您設置事件處理程序時，您有點說'點擊'事件被觸發時，執行這個函數「而不是」當'點擊'事件被解僱，執行陳述「。

這實際上是在執行之中的功能：

function(){ 
     this.date.setFullYear(this.date.getFullYear()+1); 
     alert(this.date); 
    } 

和您預期執行之中聲明：

this.next_year(); //where this refers to the calendar object. 

---

當這個代碼執行，

elem.onclick = this.next_year; 

就是這樣等於說，

elem.onclick = function(){ 
    this.date.setFullYear(this.date.getFullYear()+1); 
    alert(this.date); 
} 

所以，如果這不會使問題不夠清楚，讓我去一點點進一步解釋，當一個元件，elem，是一個單擊處理程序設置後，單擊到底發生了什麼使用elem.onclick=this.next_year;。我喜歡把它看作是瀏覽器調用elem.onclick([Event event]);。本質上，您使用elem.onclick=設置的功能在elem的上下文中執行，Event對象作爲第一個參數並且僅作爲唯一參數傳入。

爲了清楚地說明問題並將其引入主頁，函數中的this關鍵字指向被瀏覽器作爲事件處理程序調用時被單擊的元素。

function(){ 
     this.date.setFullYear(this.date.getFullYear()+1); 
     alert(this.date); 
    } 

---

我用於過說明和是重複的/冗餘道歉。我儘量保持我的答案的簡短，因爲我通常不善於解釋事物：P

PS - 不要忘記接受！