是否可以为单个事件绑定两个event listener？单按钮多函数绑定方案咨询

你当前给出的代码仅在「第二个函数始终需要绑定」的场景下可以正常运行，但没有实现你提到的「第二个函数绑定逻辑取决于布尔判断条件」的需求，从通用性和可维护性角度还有优化空间，分两种常见场景说明最优实现：

场景1：布尔条件仅在初始化绑定的时候确定，后续不会变动 #

这种情况直接在绑定第二个事件前加判断即可，不需要额外修改函数逻辑：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
const myBtn = document.getElementById("myBtn");
// 你的布尔判断条件，可根据业务逻辑赋值
const needBindTestFunc = true;

myBtn.addEventListener("click", displayDate);
// 第二个事件仅在条件满足时绑定
if (needBindTestFunc) {
  myBtn.addEventListener("click", test);
}

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}

function test() {
  document.getElementById("demo").innerHTML += "test";
}
</script>

</body>
</html>

该方案的优势是不会执行多余的判断逻辑，事件绑定完成后不会产生额外运行时开销

场景2：布尔条件会在页面运行过程中动态变化 #

这种场景不建议反复绑定/解绑事件，很容易出现重复绑定、内存泄漏的问题，更合理的做法是把判断逻辑放到事件处理函数内部：

const myBtn = document.getElementById("myBtn");
// 该变量可在运行时动态修改值
let needRunTestFunc = true;

myBtn.addEventListener("click", displayDate);
myBtn.addEventListener("click", function testWrapper() {
  if (needRunTestFunc) {
    test();
  }
});

你也可以直接把两个逻辑合并到同一个事件处理函数中，后续维护更清晰：

myBtn.addEventListener("click", function handleBtnClick() {
  displayDate();
  if (needRunTestFunc) {
    test();
  }
});

该方案的优势是适配动态条件场景，不需要额外维护事件绑定的状态

现有代码的注意点 #

你当前的写法中两个事件处理函数都操作了demo元素的innerHTML，执行顺序严格按照绑定顺序执行，这符合addEventListener的规范，只要你的业务逻辑认可这个执行顺序就没有问题，如果后续调整绑定顺序会直接影响最终渲染结果，这点需要额外注意。

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