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

表达式“myCounter.updateAll”仅返回对绑定到“updateAll”的函数对象的引用。该引用没有什么特别之处 - 具体来说，没有什么“记住”该引用来自您的“myCounter”对象的属性。

您可以编写一个函数，该函数接受一个函数作为参数，并返回一个新函数，该函数专门用于运行您的函数，并将特定对象作为“this”指针。许多图书馆都有这样的例程；例如，参见“functional.js”库及其“bind”函数。这是一个真正简单的版本：

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

现在你可以写了：

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

Answer 3

你可以：

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

Answer 4

在 ASP.Net Ajax 中你可以使用

Function.createDelegate(myObject, myFunction); 

Answer 5

我想做这样的事情，但更简单。 这个想法是让用户单击粗体文本并显示一个文本字段，他们可以在其中更改角色扮演角色的所有值。然后，当值更改时，让文本字段再次消失，替换为更新的粗体文本值。 我已经可以使用烦人的文本框警报来做到这一点。但我宁愿有类似下面的东西来代替所有这些。 我已经搜索了几个月，CMS 是最接近用完整 html 示例以最简单的方式回答我的问题的方法。网络上没有其他人可以。

所以我的问题是，我该怎么做？ 我有多个对象（字符），需要 this.elementId 来完成这项工作。

我已经修改了这个例子，但如果我尝试添加它就会中断。

html> 头> 标题>沙盒 /头> 身体> 输入 id="textarea1" size=10 type=text> 脚本> 函数 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() {实例=这个 document.getElementById(this.sourceId).onkeyup=function () {instance.updateAll()} } window.onload=函数（） {myCharCounter=new CharCounter('textarea1', 'status') myCharCounter.start() } /脚本> /正文> /html>