在 JavaScript 类中处理 DOM 个事件

Question

（随意改写标题；我发现这很难用语言表达。）

我创建了一个 JavaScript "class"（因为没有更好的词；我知道 JS 不是 class-based）代表一个 textarea 和一个div.
每次更改 textarea 的值时，我希望 div 的内容相应地更新，所以我想为 textarea 分配一个 onkeyup 事件处理程序——然而，事实证明这比我想。

这是我的 HTML 的相关部分：

<div id="container"></div>
<script src="MyTextarea.js"></script>
<script>
    var ta = new MyTextarea('container');
</script>

这是我到目前为止编写的 JS：

function MyTextarea(id) {

    this.textarea = document.createElement('textarea');
    this.box = document.createElement('div');

    var container = document.getElementById(id);
    container.appendChild(this.textarea);
    container.appendChild(this.box);

    this.textarea.onkeyup = this._synchronize;

}


MyTextarea.prototype._synchronize = function () {

    this.box.innerHTML = this.textarea.value;

};

这并没有起作用，而是坚持抛出一个 "this.textarea" is undefined" 错误。事实证明——令我惊讶的是——在 _synchronize 函数中，this 没有t 引用 MyTextarea object，而是引用 textarea 元素本身。我很困惑为什么会这样。

我在做什么and/or 没有到这里？是因为我在 "class" 内做这件事吗？我怎样才能做到这一点？

Answer 1

当您将事件处理程序指定为直接函数引用时，您正在丢失上下文。所以换句话说，不是 MyTextarea 实例对象 this 指向 HTMLTextAreaElement 对象。

有多种解决方案，例如您可以显式绑定上下文：

this.textarea.onkeyup = this._synchronize.bind(this);

或者你可以用老派的方式来做：

var self = this;
this.textarea.onkeyup = function() {
    self._synchronize();
};

在 JavaScript 类中处理 DOM 个事件

Handling DOM events in JavaScript classes

javascript

scope

prototype

dom-events

在 JavaScript 类 中处理 DOM 个事件

Handling DOM events in JavaScript classes

javascript

scope

prototype

dom-events

在 JavaScript 类中处理 DOM 个事件