如何将两个功能相同的addEventListener合并为一个

嘿，这个场景我太熟了！刚学JS的时候我也傻乎乎写过两遍一模一样的事件逻辑，后来才发现完全没必要～核心就是把重复的操作抽成一个单独的命名函数，然后给两个元素都绑定这个函数就行，既简洁还方便后续维护。

给你两种实用的解决办法：

方法一：抽离独立函数，分别绑定 #

适合元素数量少、固定的情况，步骤超简单：

1. 把原本写在两个匿名函数里的逻辑，单独写成一个有名字的函数；
2. 给两个div分别绑定这个函数的引用就好。

代码示例：

// 先定义好点击后要执行的通用逻辑
function handleDivClick() {
  // 这里放你需要的操作，比如修改内容、打印日志都可以
  console.log("点击了div，执行相同逻辑～");
  // 举个实际例子：修改点击的div的背景色
  this.style.backgroundColor = "#f0f0f0";
}

// 获取两个div元素
var div_1 = document.getElementById("div-1");
var div_2 = document.getElementById("div-2");

// 给两个元素绑定同一个事件处理函数
div_1.addEventListener('click', handleDivClick);
div_2.addEventListener('click', handleDivClick);

这里要提醒个小细节：绑定的时候别写成handleDivClick()（带括号），那样会直接执行函数而不是绑定事件，我们要传的是函数本身的引用哦。

方法二：批量选中元素，循环绑定 #

如果以后可能要加更多同类型的可点击div（比如div-3、div-4），用这种批量处理的方法更高效，不用每次都手动获取元素再绑定：

// 用选择器批量选中目标元素，这里用id前缀选择器，也可以用类选择器比如".clickable-div"
var targetDivs = document.querySelectorAll('[id^="div-"]');

// 定义通用的事件处理函数
function handleDivClick() {
  console.log("点击了div，执行相同逻辑～");
  this.style.backgroundColor = "#f0f0f0";
}

// 遍历所有选中的div，逐个绑定事件
targetDivs.forEach(function(div) {
  div.addEventListener('click', handleDivClick);
});

这种方法的好处是扩展性强，后续新增符合条件的div，不需要修改绑定事件的代码，自动就能拥有相同的点击逻辑～

备注：内容来源于stack exchange，提问作者JimWids