TypeScript类未按预期运行：输入框keyup事件绑定失效排查

我一眼就看出问题出在函数的this指向绑定错误上，这是类组件里绑定事件回调时非常常见的坑，咱们一步步来修复：

问题根源 #

当你用this._input.addEventListener('keyup', this._setInputListener)绑定事件时，浏览器触发事件时会把回调函数里的this指向触发事件的DOM元素（也就是你的输入框），而不是TodoForm类的实例。这直接导致：

1. _setInputListener里的this._input不再是你在构造函数中保存的实例属性，而是输入框本身；
2. 原本期望的逻辑因为this指向混乱完全无法正常执行。

修复方案 #

有两种简单的方式修正this指向，同时我们还能优化代码的可靠性：

方式1：用箭头函数绑定回调 #

箭头函数会自动继承外层作用域的this（也就是TodoForm实例），完美解决指向问题：

import * as $ from 'jquery';
export class TodoForm {
  private _input: Element;
  constructor(element: JQuery){
    $.get('./src/Components/todoForm/todoForm.html', (data) => {
      $(element).append(data);
      this._input = document.getElementById('todoContent');
      // 用箭头函数包裹回调，保留类实例的this指向
      this._input.addEventListener('keyup', (event) => this._setInputListener(event));
    });
  }
  private _setInputListener(event: any): void {
    alert('COucou input');
    // 直接用event.target获取触发事件的输入框，更可靠
    const input = $(event.target);
    if(input.val().length > 0){
      console.log('Active le bouton d\'ajout')
    } else {
      console.log('Désactive le bouton')
    }
  }
}

方式2：用bind()强制绑定this #

在绑定事件时，用bind()把回调函数的this强制绑定到类实例上：

import * as $ from 'jquery';
export class TodoForm {
  private _input: Element;
  constructor(element: JQuery){
    $.get('./src/Components/todoForm/todoForm.html', (data) => {
      $(element).append(data);
      this._input = document.getElementById('todoContent');
      // 用bind绑定this到类实例
      this._input.addEventListener('keyup', this._setInputListener.bind(this));
    });
  }
  private _setInputListener(event: any): void {
    alert('COucou input');
    // 此时this已经指向TodoForm实例，可以正常访问this._input
    const input = $(this._input);
    if(input.val().length > 0){
      console.log('Active le bouton d\'ajout')
    } else {
      console.log('Désactive le bouton')
    }
  }
}

额外优化建议 #

• 去掉构造函数里多余的$(function() { ... })包裹，因为$.get本身是异步操作，不需要再等待DOM ready；
• 优先用event.target获取触发事件的元素，比依赖实例属性更健壮，能避免后续输入框实例变化导致的问题。

内容的提问来源于stack exchange，提问作者Jean-Luc Aubert