实施1

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

表达式“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 2

我认为您在updateAll函数上访问实例成员时遇到问题，因为您将它用作事件处理程序，上下文（this关键字）是触发了event，而不是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 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>
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>

如何在javascript中运行对象的方法onEvent？

实施1

实施2

实施3

5 个答案: