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

Passing an function array to a button.onclick function

本文关键字：函数 button onclick 数组      更新时间：2023-09-26

我的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"。

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

如果有人知道一个快速的解决方法，那就太好了。在你问之前：我确信我的函数向我的数组添加了函数(至少在添加函数中listerns的大小变大了(：D

试着像这样定义onclick处理程序，以保持"this"指向当前类实例：

private onClick(ev)
{
    this.listeners.forEach((callback) => callback(username));
}
//Then somewhere later 
button.onclick = (ev) => this.onClick(ev);

您的主要问题是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((方法创建一个新函数，当调用该函数时，将其this关键字设置为提供的值，并在调用新函数时提供的任何参数之前有一个给定的参数序列。

处理问题的一种更复杂的方法是根本不使用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'));

感谢awnsers

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

我改为addeventhandler，并在函数中用let定义了一个函数，并为Eventhandler调用了一个新函数，该函数调用了它应该调用的函数#函数：D

let triggerOnClick = () => {
        let username = tf_name.value;
        this.listeners.forEach((callback) => callback(username));
    };
    btn_enter.addEventListener("click", () => {
        triggerOnClick();
    });

该代码有效：(

相关文章：