私は別の関数で、それに機能を追加している私は、この</p> <pre><code>private listeners: ((name: string) => void)[] = []; </code></pre> <p>のような機能の配列を持っている私は、活字体/ JavaScriptの</p> <p>に問題がbutton.onclick機能

Question

に関数配列を渡します動作するようです。私は何も起こらない、このように私のコードをしようとした場合

は今、私はボタンが

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

を押された場合、これらの関数を呼び出したい、私はそれがlistenersを知らないので、それがある賭けます。プロパティ 'のforEach' タイプに存在しません 'のMouseEvent'：

私の次の試みは

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

今TSCは

エラーTS2339は私に語りました。

は、私はここにタイプを欠けている賭けが、この配列は、誰かが迅速な回避策を知っている場合((name: string) => void)[] = [];

はクールになるタイプの関数の配列があることを彼に伝えるためにどのようにIDKの。 質問をする前に：私の関数が配列に関数を追加したと確信しています（少なくともlisternsのサイズが大きい関数を追加した場合）：D

Answer 1

このようにonclickハンドラを定義して、現在のクラスのインスタンスを指す：

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); 

このための基本的な説明：

バインド（）メソッドが呼び出されたときに、そのこのキーワードはに設定されている、新しい関数を作成します提供された値。新しい関数が呼び出されたときに、指定された引数のシーケンスが指定されたシーケンスの前に置かれます。

Answer 3

あなたの問題に対処するためのより洗練された方法は全くonclickを使用することではなく、むしろaddEventListener、あなたが作るどの、addEventListenerにhandleEvent方法でオブジェクトを渡す次のあまり知られていないアプローチを使用することができますthis議論の余地を持つすべてのあなたの問題：awnsersため

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の機能を、働くことを推測します私はそれを定義したコードではありません。

私は関数内の関数を聞かせて、それが呼び出す必要があります関数を呼び出すEventHandlerのための新しい関数を呼び出すaddeventhandlerとして定義するように変更＃のfuncception：D

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

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

コードが動作することを:)