无法使用 removeEventListener 删除 eventListener

Question

我在删除 eventListener 表单函数时遇到问题。

每次调用函数都会添加另一个事件，之后不会被删除。

我正在通过以下方式检查控制台：

getEventListeners(document.querySelector('body'));

---

function handleKeyDown(e) {
      const workoutEdit = document.querySelector('.formEdit');
      const backdrop = document.querySelector('.backdrop');
      if (e.key === 'Escape' && workoutEdit && backdrop) {
        curWorkout.parentElement.removeChild(workoutEdit);
        curWorkout.parentElement.removeChild(backdrop);
        body.removeEventListener('keydown', handleKeyDown);
      }
      if (e.key === 'Enter') {
        this.#workouts[indexWorkout].distance = +editDistance.value;
        this.#workouts[indexWorkout].duration = +editDuration.value;
        console.log(this.#workouts);
        body.removeEventListener('keydown', handleKeyDown);
      }
    }

    body.addEventListener('keydown', handleKeyDown.bind(this));

Answer 1

handleKeyDown.bind(this)

创建一个新函数，如果您不将对它的引用存储在某处，则

removeEventListener()

无法将其删除。

如果你需要绑定

this

，你应该存储引用，像这样：

const boundHandler = handleKeyDown.bind(this);
body.addEventListener('keydown', boundHandler);

// And then under some circumstances:
body.removeEventListener('keydown', boundHandler);