如何将 class 方法作为事件添加到 html 按钮

Question

我有一个叫做Header的jsclass，它在调用render()方法时，将htmlheader代码添加到所有页面网站。

这个class，除了render()方法，还有一个hello()方法：

hello() {
    console.log('Hello');
}

问题是，如何将此方法作为事件添加到 header 按钮？

我试过这样做：

<button onclick="${this.hello}">Call/button>

但它在控制台中显示错误：Uncaught SyntaxError: Unexpected token '{'

如何将 class 方法作为事件添加到 html 按钮？

Answer 1

首先，为您的 class 创建一个对象。然后使用对象调用方法。

示例：

class Header {
   render(){
      // render other things
      // also render: <button onclick="header.hello();">Call</button>
   }
   hello() {
     console.log('Hello');
   }

   // other methods here...
}

var header = new Header();
header.render();

Answer 2

你的意思是这样的吗？

您可以使用 HTMLelement.addEventListener 来侦听特定事件，例如按钮上的 click 事件，然后提供回调函数以在触发该事件时执行。

const btn = document.getElementById('test');

class Header {

    render(element) {
        element.addEventListener('click', () => this.hello());
    }
    hello() {
        console.log('Hello');
    }

}

const header = new Header();
header.render(btn);

<button id="test">Click me</button>

如何将 class 方法作为事件添加到 html 按钮

How to add a class method as an event to a html button

javascript

methods

events

class

onclick