能否通过多个事件监听器切换按钮点击触发的函数？

针对你的需求，有几种直接可行的实现方式：

方法1：移除原监听器，绑定新的监听器 #

因为你用的是命名函数（非匿名函数），可以直接通过removeEventListener移除原监听，再添加新的监听。注意必须使用和添加时完全相同的函数引用，匿名函数无法被移除。

示例代码：

// 移除原监听器
document.getElementById('mybutton').removeEventListener('click', myFunction, false);
// 添加新的监听器
document.getElementById('mybutton').addEventListener('click', myFunction2, false);

// 原函数
function myFunction() {
   console.log('myFunction called');
}

// 新函数
function myFunction2() {
   console.log('myFunction2 called');
}

如果需要在第一次点击按钮时就完成切换（即第一次点击后，后续点击都执行myFunction2），可以把移除和添加的逻辑放到原函数里：

function myFunction() {
   console.log('myFunction called'); // 如果不需要这次执行，删掉这行
   // 移除自己
   document.getElementById('mybutton').removeEventListener('click', myFunction, false);
   // 绑定新函数
   document.getElementById('mybutton').addEventListener('click', myFunction2, false);
}

function myFunction2() {
   console.log('myFunction2 called');
}

方法2：用代理函数动态切换目标函数 #

如果不想频繁移除/添加监听器，可以定义一个代理函数，内部根据状态决定调用哪个函数，只需要切换状态就能实现功能变更：

// 定义状态变量，标记当前要执行的函数
let currentFunction = myFunction;

// 代理函数
function proxyFunction() {
   currentFunction();
}

// 初始绑定代理函数
document.getElementById('mybutton').addEventListener('click', proxyFunction, false);

// 原函数
function myFunction() {
   console.log('myFunction called');
   // 点击后切换目标函数（如果需要点击就切换的话）
   currentFunction = myFunction2;
}

// 新函数
function myFunction2() {
   console.log('myFunction2 called');
   // 也可以在这里再切回去，实现来回切换
   // currentFunction = myFunction;
}

这种方式的好处是不用操作监听器的绑定/移除，只需要修改currentFunction的值就能切换执行逻辑，灵活性更高。

关于onclick属性的说明 #

你提到修改onclick属性违反规范其实不准确——现代浏览器完全支持修改element.onclick属性，只是这种方式属于DOM0级事件模型，和addEventListener的DOM2级模型不同：DOM0级事件只能绑定一个函数（后续赋值会覆盖之前的），而DOM2级可以绑定多个。如果你没有同时使用多种事件绑定方式，修改onclick是完全可行的，比如：

// 初始绑定
document.getElementById('mybutton').onclick = myFunction;

// 切换为新函数
document.getElementById('mybutton').onclick = myFunction2;

这种方式简单直接，不存在浏览器规范问题，只是功能上和addEventListener有区别而已。

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