JS中如何无需匿名函数传递event给EventListener绑定的函数

错误写法的问题 #

你写的document.querySelector("#b1").addEventListener("click",myFunction(e))存在两个核心问题：

1. myFunction(e)是立即执行的函数调用，并非传递函数本身给事件监听——此时e未定义，会直接抛出引用错误。
2. addEventListener要求接收一个函数作为回调，而你传递的是函数执行后的返回值（这里myFunction无返回值，实际传入的是undefined），所以事件触发时不会执行预期逻辑。

正确简化写法 #

直接传递函数名即可，浏览器会自动把事件对象作为第一个参数传给回调函数：

document.querySelector("#b1").addEventListener("click", myFunction);

function myFunction(e) {
    document.getElementsByTagName('h5')[0].innerHTML = e.target.tagName;
}

原理说明 #

当你将myFunction作为回调绑定到事件时，触发点击事件的瞬间，浏览器会自动创建事件对象，并将其作为第一个参数传入myFunction，完全不需要用匿名函数包裹传递。

扩展：需要额外传参的情况 #

如果除了event还需要传递自定义参数，可以用bind方法绑定前置参数，事件对象会自动排在参数列表的后面：

function myFunction(customText, e) {
    console.log(customText);
    document.getElementsByTagName('h5')[0].innerHTML = `${customText}: ${e.target.tagName}`;
}

// 绑定自定义参数，event会作为第二个参数传入
document.querySelector("#b1").addEventListener("click", myFunction.bind(null, "当前点击的标签是"));

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