能否将EventListener触发时的触发元素传入其回调函数？

当然可以实现啦！不过你的示例代码里有两个小细节需要修正，我来一步步给你拆解正确的实现方式：

先修正你代码里的问题 #

首先，事件监听的事件名应该是"click"而不是"onclick"——addEventListener里的事件名不需要加on前缀；其次，直接写myCallback(buttonElement)会导致函数立即执行，而不是等到按钮点击时才触发，这是新手很容易踩的坑哦。

两种常用的实现方法 #

方法1：利用事件对象获取触发元素 #

其实事件回调函数默认会接收一个事件对象，这个对象里包含了触发事件的元素信息，最常用的是event.target（实际触发事件的元素）和event.currentTarget（绑定事件的元素，这里和target一致）。这种方式更灵活，尤其适合多个元素共用同一个回调的场景：

// 获取按钮元素
const buttonElement = document.querySelector('button');

// 绑定click事件，直接传入回调函数名
buttonElement.addEventListener("click", myCallback);

// 回调函数接收事件对象
function myCallback(event) {
  // 获取触发事件的按钮元素
  const triggerElement = event.target;
  // 在这里使用元素，比如修改内容
  triggerElement.textContent = "已点击";
}

方法2：主动传递元素到回调 #

如果你明确要把特定元素传给回调，可以用箭头函数包裹，或者用bind方法绑定参数：

方式A：箭头函数包裹

const buttonElement = document.querySelector('button');

// 用箭头函数包裹回调，主动传入按钮元素
buttonElement.addEventListener("click", () => myCallback(buttonElement));

function myCallback(element) {
  console.log("传入的元素：", element);
  element.style.backgroundColor = "#eee";
}

方式B：使用bind绑定参数

const buttonElement = document.querySelector('button');

// 用bind绑定第一个参数为buttonElement，null是绑定this（这里不需要）
buttonElement.addEventListener("click", myCallback.bind(null, buttonElement));

function myCallback(element) {
  console.log("传入的元素：", element);
}

两种方法的区别 #

• 方法1更通用：如果后续给多个按钮绑定同一个回调，event.target会自动对应点击的那个按钮，不需要额外修改代码。
• 方法2更直接：适合你确定只需要传递特定元素的场景，但如果是批量绑定元素的话，写法会更繁琐。

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