如何在JavaScript中運行對象的方法onEvent？

Question

我剛開始使用JavaScript，我錯過了一些重要的知識。我希望你能幫我填補這個空白。

所以我試圖運行的腳本是假設要計算文本字段中的字符，並更新段落以告訴用戶他們輸入了多少個字符。我有一個名爲charCounter的對象。 sourceId是要對字符進行計數的文本區域的ID。statusId是每次按下某個鍵時要更新的段落的ID。

function charCounter(sourceId, statusId) { 
    this.sourceId = sourceId; 
    this.statusId = statusId; 
    this.count = 0; 
} 

有一種叫做updateAll的方法。它更新字符數並更新段落。

charCounter.prototype.updateAll = function() { 
    //get the character count; 
    //change the paragraph; 
} 

我有一個啓動函數，當窗口加載時調用。

function start() { 
    //This is the problem 
    document.getElementbyId('mytextfield').onkeydown = myCounter.updateAll; 
    document.getElementbyId('mytextfield').onkeyup = myCounter.updateAll; 
} 

myCounter = new charCounter("mytextfield","charcount"); 
window.onload = start; 

上面的代碼是問題所在。爲什麼在事件觸發時，我無法調用myCounter.updateAll方法？這真讓我感到困惑。我明白，如果你調用方法likeThis（）你會從函數中獲得一個值。如果你叫它likeThis你會得到一個指向函數的指針。我將我的事件指向一個函數。我也嘗試過直接調用這個函數，它工作得很好，但是當事件被觸發時它不起作用。

我錯過了什麼？

---

感謝您的所有答案。這裏有三種不同的實現。

實現1

function CharCounter(sourceId, statusId) { 
    this.sourceId = sourceId; 
    this.statusId = statusId; 
    this.count = 0; 
}; 
    CharCounter.prototype.updateAll = function() { 
     this.count = document.getElementById(this.sourceId).value.length; 
     document.getElementById(this.statusId).innerHTML = "There are "+this.count+" charactors"; 
    }; 

function start() { 
    myCharCounter.updateAll(); 
    document.getElementById('mytextfield').onkeyup = function() { myCharCounter.updateAll(); }; 
    document.getElementById('mytextfield').onkeydown = function() { myCharCounter.updateAll(); }; 
}; 

myCharCounter = new CharCounter('mytextfield','charcount'); 
window.onload = start; 

實現2

function CharCounter(sourceId, statusId) { 
    this.sourceId = sourceId; 
    this.statusId = statusId; 
    this.count = 0; 
}; 
    CharCounter.prototype.updateAll = function() { 
     this.count = document.getElementById(this.sourceId).value.length; 
     document.getElementById(this.statusId).innerHTML = "There are "+ this.count+" charactors"; 
    }; 
    CharCounter.prototype.start = function() { 
     var instance = this; 
     instance.updateAll(); 

     document.getElementById(this.sourceId).onkeyup = function() { 
      instance.updateAll(); 
     }; 
     document.getElementById(this.sourceId).onkeydown = function() { 
      instance.updateAll(); 
     }; 
    }; 

window.onload = function() { 
    var myCounter = new CharCounter("mytextfield","charcount"); 
    myCounter.start(); 
}; 

實現3

function CharCounter(sourceId, statusId) { 
    this.sourceId = sourceId; 
    this.statusId = statusId; 
    this.count = 0; 
}; 
    CharCounter.prototype.updateAll = function() { 
     this.count = document.getElementById(this.sourceId).value.length; 
     document.getElementById(this.statusId).innerHTML = "There are "+this.count+" charactors"; 
    }; 

function bind(funcToCall, desiredThisValue) { 
    return function() { funcToCall.apply(desiredThisValue); }; 
}; 

function start() { 
    myCharCounter.updateAll(); 
    document.getElementById('mytextfield').onkeyup = bind(myCharCounter.updateAll, myCharCounter); 
    document.getElementById('mytextfield').onkeydown = bind(myCharCounter.updateAll, myCharCounter); 
}; 

myCharCounter = new CharCounter('mytextfield','charcount'); 
window.onload = start; 

Answer 1

我想您在使用上updateAll功能的實例成員的問題，因爲你正在使用它作爲一個事件處理程序，上下文（this關鍵字）是觸發事件的DOM元素，而不是您的CharCounter對象實例。

你可以做這樣的事情：

function CharCounter(sourceId, statusId) { 
    this.sourceId = sourceId; 
    this.statusId = statusId; 
    this.count = 0; 
} 

CharCounter.prototype.updateAll = function() { 
    var text = document.getElementById(this.sourceId).value; 
    document.getElementById(this.statusId).innerHTML = text.length; 
}; 

CharCounter.prototype.start = function() { 
    // event binding 
    var instance = this; // store the current context 
    document.getElementById(this.sourceId).onkeyup = function() { 
    instance.updateAll(); // use 'instance' because in event handlers 
          // the 'this' keyword refers to the DOM element. 
    }; 
} 

window.onload = function() { 
    var myCharCounter = new CharCounter('textarea1', 'status'); 
    myCharCounter.start(); 
}; 

檢查運行here上面的例子。

Answer 2

您可以：

function start() { 
    //This is the problem 
    document.getElementbyId('mytextfield').onkeydown = function() { myCounter.updateAll(); }; 
    document.getElementbyId('mytextfield').onkeyup = function() { myCounter.updateAll(); }; 
} 

Answer 3

表達式「myCounter.updateAll」僅返回對綁定到「updateAll」的函數對象的引用。這個引用沒有什麼特別之處 - 具體地說，沒有什麼「記住」引用來自你的「myCounter」對象的屬性。

您可以編寫一個函數，該函數將一個函數作爲參數，並返回一個新函數，該函數專門爲使用特定對象作爲「this」指針運行函數而構建。很多圖書館都有這樣的例程;例如參見「functional.js」庫和它的「綁定」函數。這裏是一個真正的簡單版本：

function bind(funcToCall, desiredThisValue) { 
    return function() { funcToCall.apply(desiredThisValue); }; 
} 

現在你可以這樣寫：

document.getElementById('myTextField').onkeydown = bind(myCounter.updateAll, myCounter); 

Answer 4

在ASP.Net Ajax的，你可以使用

Function.createDelegate(myObject, myFunction); 

Answer 5

我想要做這樣的事情，但更簡單。 這個想法是讓用戶點擊加粗的文本，並在顯示角色扮演角色的所有值時出現文本字段。然後當值更改時，使文本字段再次被更新的粗體文本值替換。 我已經可以使用惱人的文本框警報來做到這一點。但我寧願有類似於下面的東西來代替所有這些。 我已經搜索了幾個月，CMS以最簡單的方式用完整的html示例回答我的問題。網絡上沒有其他人可以。

所以我的問題是，我該怎麼做？ 我有多個對象（字符），並需要this.elementId使這項工作。

我修改了這個例子，但如果我嘗試添加它，它會中斷。

 

html> 
head> 
title>Sandbox 
/head> 
body> 
input id="textarea1" size=10 type=text> 

script> 
function CharCounter(sourceId, statusId) 
{this.sourceId=sourceId; 
    this.statusId=statusId; 
    this.count=0; 
} 
CharCounter.prototype.updateAll=function() 
{text=document.getElementById(this.sourceId).value 
    document.getElementById(this.statusId).innerHTML=text 
} 
CharCounter.prototype.start=function() 
{instance=this 
    document.getElementById(this.sourceId).onkeyup=function() 
    {instance.updateAll()} 
} 
window.onload=function() 
{myCharCounter=new CharCounter('textarea1', 'status') 
    myCharCounter.start() 
} 
/script> 
/body> 
/html>