如何在javascript中运行对象的方法onEvent？ [英] How do I run an object's method onEvent in javascript?

问题描述

我刚刚开始使用javascript，而我在我的知识中缺少一些重要的东西。我希望你可以帮助我填补这个空白。

I just started using javascript and I'm missing something important in my knowledge. I was hoping you could help me fill in the gap.

所以我试图运行的脚本假设要计算一个文本字段中的字符，并更新一个段落告诉用户他们输入了多少个字符。我有一个名为charCounter的对象。 sourceId是要对字符进行计数的文本区域的id。statusId是每次按下一个键时更新的段落的ID。

So the script I'm trying to run is suppose to count the characters in a text field, and update a paragraph to tell the user how many characters they have typed. I have an object called charCounter. sourceId is the id of the text area to count characters in. statusId is the id of the paragraph to update everytime a key is pressed.

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

有一种方法叫做updateAll。它更新字符数并更新段落。

There is one method called updateAll. It updates the count of characters and updates the paragraph.

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

我有一个启动函数，在窗口加载时调用。 >

I have a start function that is called when the window loads.

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 ，你将得到一个指向一个函数的指针。我把我的事件指向一个函数。我也试图直接调用这个函数，它的工作原理很好，但是事件被触发后，它将不起作用。

The above code is the problem. Why in the world can't I call the myCounter.updateAll method when the event is fired? This is really confusing to me. I understand that if you call a method likeThis() you'll get a value from the function. If you call it likeThis you are getting a pointer to a function. I'm pointing my event to a function. I've also tried calling the function straight up and it works just fine, but it will not work when the event is fired.

我缺少什么？

感谢所有答案。这里有三个不同的实现。

Thanks for all the answers. Here's three different implementations.

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

Implementation 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

Implementation 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;

推荐答案

我认为您在访问您的实例成员时遇到问题 updateAll 函数，因为你使用它作为事件处理程序，上下文（这个关键字）是DOM触发事件的元素，而不是您的CharCounter对象实例。

I think you are having problems accessing your instance members on the updateAll function, since you are using it as an event handler, the context (the this keyword) is the DOM element that triggered the event, not your CharCounter object instance.

您可以这样做：

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 。

Check the above example running here.

这篇关于如何在javascript中运行对象的方法onEvent？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！