Javascript 单击时附加事件处理程序指向类中的函数

是否可以在单击指向类中的函数时附加事件处理程序？像这样：

class SomeClass {
  render() {
    this.parentElement.append(`
      <form>
        <input type="text" onkeydown="${this.keydown()}"/>
        <button onclick="this.onclick();">Submit</button>
        <span></span>
      </form>
    `);
  }

  onkeydown() {}
  onclick() {}
}

class-SomeClass{
render（）{
this.parentElement.append(`
提交
`);
}
onkeydown（）{}
onclick（）{}
}

---

谢谢。

你在这里是怎么做的？否。尤其是因为

追加

只追加节点，而不创建节点。文本是一个节点，但您不会看到表单，只会看到生成表单的HTML。但是，即使您使用

innerHTML

，它仍然不起作用

对于第一个函数，您没有在键盘上放置对

onkeypress

的引用，而是在调用

render

时直接调用该函数。如果删除括号，只需调用函数的默认值。与将

置于keypress.toString（）上时相同。不是很有帮助

第二个函数，
onclick
有点棘手。它确实调用了一个函数，而不是您希望的函数。在这种情况下，即使您在类中编写html，当单击按钮时，
this
的上下文也不是该类。相反，它是连接了onclick侦听器的元素，
按钮
。那么它调用什么函数呢？它本身一次又一次这是一个很好的例子，说明了为什么将函数命名为与本机函数相同不是一个好主意。但遗憾的是，即使您将其名称更改为更安全的名称，例如
handleClick
，它仍然无法工作。
按钮
（此

的当前值）没有您试图引用的功能

---

那么，有可能吗？取决于你在找什么。如果渲染节点，然后以更传统的方式添加事件侦听器，请确保。只需添加

this.parentElement.querySelector（'button'）。onclick=this.handleClick

或

this.parentElement.querySelector（'input'）.addEventListener（'keydown'，this.handleKeyDown）

将表单添加到dom后（使用

innerHTML

或，而不是

append

）。或者，在将事件处理程序附加到父元素之前，使用

createElement

并附加事件处理程序，跟随并创建元素。不过，如果你想访问你的类

这个

，你可能会想先访问。

你不能这样做！但是您可以更改

渲染

以使用

document.createElement

创建元素，然后可以设置该范围内元素的

.onclick=

属性！或者在附加HTML后附加事件侦听器（选择这些元素，然后使用

。onclick=