类变量在元素事件中不可见

Class variables are not visible inside element event?

本文关键字：事件 元素 类变量      更新时间：2023-09-26

我希望创建一个web应用程序，这意味着HTML元素必须非常动态，因为它们将被创建和移动，并由不同的其他元素处理很多。因此，我决定使用类-有很多成功，直到处理事件的点..这是类的怀疑，Chrome告诉我混淆了它与未定义的变量。

function SpanInputPair(element) {
    span = document.createElement("span");
    this.Span = getNextInputID();
    span.style.display = "none";
    span.id = this.Span;
    element.appendChild(span);
    input = document.createElement("input");
    input.type = "text";
    this.Input = getNextInputID(); // request a new ID for this element and save into this class
    input.id = this.Input; // Attach it onto the element for future finding :/ (slow)
    element.appendChild(input);
    input.focus();
    span.onclick  = function() {
        var input = getInput(this.Input); // this.Input cannot be seen?
        var span = getInput(this.Span);
        input.value = span.innerHTML;
        toggleDisplay(input);
        toggleDisplay(span);
        input.focus();
    }
    input.onblur...

行"var input = getInput(this. input);"是问题，因为Chrome告诉我它看不到"this. input"。输入"了。我知道这一点是因为我可以运行这一行并替换"this"。输入实际值，它返回元素fine。正如您所看到的，我让它动态地创建了一个文本框和span，并设置了它们的id以供将来使用，这是因为我以前试图将元素本身保存在类中，并在事件中使用它——同样的问题，所以我试图通过使用document. getelementbyid()在每个事件的文档中找到它。奇怪的是，它似乎也没有关注它刚刚创建的文本框(如果这可能是问题的一部分，我不知道)。这个项目完全从无到有，没有使用任何库。所以我的问题是，你能解释一下为什么元素的事件在创建它的类中看不到任何变量吗?我怎样才能解决这个问题呢?

我还没有看到这个帖子，因为很多人都在使用像JQuery这样的库和/或不使用类，这个问题是特定的事件处理与类的内部变量的帮助

虽然这可能没有太大意义，但在JavaScript中是正常的，因为this的值在您声明的局部函数中已经更改了。因此，你必须正确地理解如何在JavaScript中声明和使用函数:

JavaScript中的

函数有一个叫做context的东西，这意味着每个函数都被限定为一个特定的对象。如果我们在脚本中声明一个函数，它将被绑定到全局对象(在浏览器中是window)。

然而，如果我们试图声明一个方法(一个属于对象的函数)，this将是一个表示对象本身的神奇变量。每次调用this.my_property时，您将获得对象的属性值，要么是"属性"，要么是"方法"。 因此，可以更改函数的上下文，就像事件处理程序一样。在您的场景中，事件处理程序是上下文发生变化的函数，因此每次访问this时，它的值将是HTMLElement对象，当您单击它时接收事件。

要解决这个问题，可以声明一个辅助变量，并在处理程序中使用它。社区通常遵循的做法是:

var that = this;   // Also, the people use 'self' instead of 'that'
span.onclick = function() {
   var input = that.input;
   // ...
};

click函数中的this的值是被点击的元素。这里就是你刚刚创建的<span>。

在定义click函数时，您希望返回this的值。(问题也可能是:调用SpanInputPair函数时'this'的值是什么?你可以考虑一下。)

你可以这样做，将它添加到闭包中:

var thisInput = this.Input;
...
span.onclick  = function() {
    var input = getInput(thisInput);

下一行的this.Span也会出现同样的问题。

相关文章：