JavaScript类中拖拽API事件监听方法的多作用域问题

方法1：绑定this到类实例，用事件对象获取目标元素 #

在类的构造函数里，把handleDrop方法的this绑定到类实例，这样方法里既能访问类的4x4table属性，又能通过事件对象拿到目标元素：

class PuzzleGame {
  constructor() {
    this.4x4table = document.getElementById('puzzle-table');
    // 把this绑定到类实例，确保方法里的this指向类
    this.handleDrop = this.handleDrop.bind(this);
    // 给表格添加drop事件监听
    this.4x4table.addEventListener('drop', this.handleDrop);
  }

  handleDrop(event) {
    event.preventDefault();
    // 这里的this是类实例，可以正常访问this.4x4table
    console.log(this.4x4table);
    // 通过event.target获取触发drop事件的目标元素
    const targetElement = event.target;
    console.log(targetElement);
  }
}

方法2：用箭头函数做回调，通过事件对象拿目标元素 #

直接在添加监听时使用箭头函数，箭头函数的this会继承自外层的类实例，同时用event对象获取目标元素：

class PuzzleGame {
  constructor() {
    this.4x4table = document.getElementById('puzzle-table');
    // 箭头函数的this绑定类实例，不用额外绑定
    this.4x4table.addEventListener('drop', (event) => {
      event.preventDefault();
      // 正常访问类的4x4table属性
      console.log(this.4x4table);
      // 用event.target拿到触发事件的DOM元素
      const targetElement = event.target;
      console.log(targetElement);
    });
  }
}

核心逻辑说明 #

• 普通函数作为事件回调时，this默认指向触发事件的DOM元素，所以访问不到类实例的属性。
• 箭头函数没有独立的this，它的this继承自外层作用域（这里是类的构造函数，也就是类实例），因此能直接访问类的属性，但此时不能用this获取目标元素，必须通过event.target或event.currentTarget来拿。

内容的提问来源于stack exchange，提问作者Karuz