Question

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

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

  onkeydown() {}
  onclick() {}
}

谢谢。

Answer 1

你在这里做的方式？不会。特别是因为append只会附加节点，而不会创建节点。文本是一个节点，但您不会看到您的表单，只会看到生成表单的HTML。但是，即使您使用innerHTML，它仍然无效。

对于第一个函数，您没有引用onkeypress，在调用render时，您实际上正在调用该函数。如果删除括号，则只需调用函数的默认值即可。就像放onkeypress.toString()一样。不是很有帮助。

第二个函数onclick有点棘手。它调用一个函数，而不是你希望的函数。 Understanding the this keyword in JavaScript is tricky.在这种情况下，即使你在一个类中编写html，当单击该按钮时，this的上下文也不是那个类。相反，它是附加了onclick侦听器的元素button。那么它的功能是什么？本身。一遍又一遍地。这是一个非常好的例子，说明为什么命名函数与本机函数相同并不是一个好主意。可悲的是，即使你把它的名字更改为更安全的东西，比如handleClick，它仍然不起作用。 button（this的当前值）没有您尝试引用的功能。

那么，有可能吗？取决于你在寻找什么。如果您渲染节点，然后以更传统的方式添加事件侦听器，请确保。将表单添加到dom后，只需添加this.parentElement.querySelector('button').onclick = this.handleClick;或this.parentElement.querySelector('input').addEventListener('keydown', this.handleKeyDown)（使用innerHTML或insertAdjacentHTML，而不是append）。或者按照Ibrahim's sugestion并使用createElement创建元素，并在将它们附加到父元素之前附加事件处理程序。但是，如果您想要访问自己的课程this，可能需要先bind them。

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

1 个答案: