为何上下文未传递至EventListener？待办应用模态框复用问题

首先，我得先点出你可能踩的第一个小坑：document.querySelector('.your-button-class')只会返回第一个匹配该类的元素，另外两个按钮根本没被绑定事件！这是新手常犯的错误，要获取所有同类别按钮，得用document.querySelectorAll('.your-button-class')才行。

接下来聊聊你说的“上下文未传递”问题——大概率是指事件处理函数里的this没有指向触发点击的按钮，或者你想把自定义上下文绑定到复用函数里？我分两种常见情况给你拆解：

情况1：复用函数需要指向触发事件的按钮（this指向按钮） #

假设你的复用模态框切换函数是这样的：

function toggleModal() {
  // 这里想用this指代当前点击的按钮
  console.log('当前点击的按钮:', this);
  showBackdrop.classList.toggle('visible');
  showModal.classList.toggle('visible');
}

那给所有按钮绑定事件的正确方式是：

// 先获取所有目标按钮
const buttons = document.querySelectorAll('.your-button-class');
// 遍历每个按钮，逐个添加事件监听器
buttons.forEach(button => {
  button.addEventListener('click', toggleModal);
});

这样每次点击按钮时，toggleModal里的this就会自动指向当前触发点击的按钮——因为事件监听器默认会把触发事件的元素作为this传递给回调函数。

情况2：想手动指定函数的上下文（比如绑定到应用实例） #

如果你需要让复用函数的this指向自定义的上下文（比如你的待办应用对象），可以用bind()方法固定上下文：

// 假设你的待办应用实例是这样的
const todoApp = {
  backdrop: document.querySelector('.backdrop'),
  modal: document.querySelector('.modal'),
  toggleModal() {
    this.backdrop.classList.toggle('visible');
    this.modal.classList.toggle('visible');
  }
};

// 给按钮绑定事件时，用bind把this固定为todoApp
buttons.forEach(button => {
  button.addEventListener('click', todoApp.toggleModal.bind(todoApp));
});

这样不管哪个按钮被点击，toggleModal里的this都会指向todoApp对象，而不是按钮本身。

避坑提醒：别用箭头函数当事件回调 #

如果你不小心用了箭头函数作为事件监听器的回调，那this会继承外层的上下文（通常是window），因为箭头函数没有自己的this：

// 错误示例：this会指向window，不是点击的按钮
button.addEventListener('click', () => toggleModal());

这种情况就会出现“上下文没传递”的问题，一定要避开这种写法。

最后再帮你梳理完整流程：

• 用querySelectorAll获取所有目标按钮
• 编写复用的模态框切换函数
• 遍历按钮，给每个按钮绑定事件监听器，根据需求选择是否绑定自定义上下文

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