如何在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>