将函数数组传递给button.onclick函数

Question

我在TypeScript / JavaScript上遇到麻烦

我有这样的功能数组

private listeners: ((name: string) => void)[] = [];

我在另一个似乎起作用的功能中添加了功能。

现在，我想在按下按钮时调用这些功能

button.onclick = function(){
   this.listeners.forEach((callback) => callback(username));
}

如果我以这种方式尝试代码，什么也不会发生，我敢打赌，这是因为它不了解listeners 。

我的下一个尝试是

button.onclick = function(listeners){
       listeners.forEach((callback) => callback(username));
}

现在tsc告诉我

错误TS2339：类型'MouseEvent'不存在属性'forEach'。

我敢打赌我在这里缺少类型，但是idk如何告诉他这个数组是类型为((name: string) => void)[] = [];的函数数组((name: string) => void)[] = [];

如果有人知道一种快速的解决方法，那将很酷。 在您问之前：我确定我的函数向数组中添加了函数（至少在add函数中， listerns的大小变大了）：D

Answer 1

尝试像这样定义您的onclick处理程序，以使“ this”指向当前的类实例：

private onClick(ev)
{
    this.listeners.forEach((callback) => callback(username));
}

//Then somewhere later 
button.onclick = (ev) => this.onClick(ev);

Answer 2

您的主要问题是， this与您期望的上下文无关。 相反， this指MouseEvent您单击处理程序的上下文。

作为解决问题的简单方法，可以使用Function.prototype.bind() 。

更改

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}

对此

button.onclick = function(){ 
   this.listeners.forEach((callback) => callback(username));
}.bind(this);

基本说明：

bind（）方法创建一个新函数，该函数在被调用时将其关键字设置为提供的值，并在调用新函数时提供给定的参数序列。

Answer 3

处理您的问题的一个更复杂的方法是不使用onclick所有，而是addEventListener ，您可以使用传递对象有下列鲜为人知的方法handleEvent方法addEventListener ，这使得所有的问题，与this毫无意义：

class Foo {

  private listeners: ((name: string) => void)[] = [];

  constructor(button) {
    button.addEventListener('click', this);
  }

  handleEvent(event) {
    // check event type
    this.listeners.forEach(callback => callback(username));
  }

}

const new Foo(document.getElementById('myButton'));

Answer 4

谢谢遮篷

我猜想直接添加一个函数是行不通的，因为它是一个Eventhandler函数，该函数在代码中的某个地方起作用，但在我定义它的地方不起作用。

我更改为addeventhandler并在函数内部定义了let函数，并为Eventhandler调用了一个新函数，该函数调用了应调用的函数。#funcception：D

let triggerOnClick = () => {
        let username = tf_name.value;
        this.listeners.forEach((callback) => callback(username));
    };

    btn_enter.addEventListener("click", () => {
        triggerOnClick();
    });

该代码有效:)