能否为同一元素添加同类型事件监听器以触发不同函数？

嘿，这两个问题我实际开发中都碰到过，给你详细拆解下：

一、能不能给同一元素的同一事件加多个监听器调用不同函数？ #

当然可以啊！你写的那段代码本身是完全没问题的：

document.getElementById("searchBar").addEventListener("keyup", populateTable);
document.getElementById("searchBar").addEventListener("keyup", createButtons);

正常情况下，keyup触发时，populateTable和createButtons会按照你添加的顺序依次执行。你说只触发了一个，大概率是其中某个函数里藏了“坑”：

• 函数执行时抛出了未捕获的错误，导致后续代码直接中断；
• 极少数情况是函数里误用了event.stopImmediatePropagation()，这个方法会阻止同一元素后续的同类型监听器执行（注意和stopPropagation的区别，后者只阻止事件冒泡）。

你可以给两个函数加个日志排查下：

function populateTable(e) {
  console.log('populateTable 执行啦！');
  // 你的原有代码
}

function createButtons(e) {
  console.log('createButtons 也被调用了！');
  // 你的原有代码
}

看看控制台里两个日志是不是都能出来，就能快速定位问题啦。

二、不修改第三方模块，添加额外的change事件监听器并保留原有功能 #

这个太好办了！addEventListener本来就是设计来支持多个同类型监听器共存的，和旧的onchange = 函数那种会覆盖的写法完全不一样。

你直接给搜索栏加自己的change监听器就行：

const searchBar = document.getElementById("searchBar");
searchBar.addEventListener("change", function(e) {
  // 这里写你的自定义逻辑，比如更新额外的按钮、统计输入数据等等
  console.log('我的自定义change事件触发啦！');
  // 要是需要用事件对象，直接用e就行，不会和第三方的逻辑冲突
});

这样第三方模块的表格筛选逻辑和你的自定义逻辑都会在change事件触发时执行，顺序就是谁先被添加谁先运行。

当然，也有极小概率第三方模块用的是旧的onchange赋值方式（现在很少见了），那你可以先把原来的onchange引用存下来，再合并逻辑：

const searchBar = document.getElementById("searchBar");
const originalOnChange = searchBar.onchange;

searchBar.onchange = function(e) {
  // 先执行第三方的原有逻辑
  if (originalOnChange) {
    originalOnChange.call(this, e); // 确保this指向搜索栏，和原来的逻辑上下文一致
  }
  // 再执行你的自定义代码
  console.log('自定义逻辑执行中...');
};

不过现在大部分靠谱的模块都会用addEventListener，所以第一种方法基本就能搞定你的需求。

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