如何使用JavaScript切换元素绑定的onkeyup事件处理函数

你写的绑定代码document.getElementById('input-search-tags').onkeyup = filter_tagsC()存在逻辑错误：赋值时给函数名加了()，代码运行到这一行会立刻执行filter_tagsC函数，最终把这个函数的返回值（没有显式return的话就是undefined）绑定给onkeyup事件，根本没有把函数本身注册为键盘抬起时的触发回调，后续点击切换自然不会按预期运行。

• 基础修复：事件绑定时不要加调用括号，只传递函数引用
  不管是初始绑定还是点击切换时重新赋值，都不要在函数名后面加()，正确的基础绑定写法如下：

  const searchInput = document.getElementById('input-search-tags')
  // 初始绑定第一个逻辑的处理函数，不要带()
  searchInput.onkeyup = filter_tagsA
  

• 实现切换逻辑：加状态标记，点击按钮时重新给onkeyup赋值对应函数引用
  准备一个布尔变量记录当前激活的功能逻辑，每次点击按钮翻转状态，同时给输入框的onkeyup重新赋值对应的函数即可：

  const toggleBtn = document.getElementById('your-toggle-btn-id')
  // 状态标记：false时用filter_tagsA逻辑，true时切换到filter_tagsC逻辑
  let enableFilterC = false
  
  toggleBtn.onclick = function() {
    enableFilterC = !enableFilterC
    // 重新赋值事件回调，同样不要加调用括号
    searchInput.onkeyup = enableFilterC ? filter_tagsC : filter_tagsA
  }
  

• 进阶写法（推荐）：如果页面上还有其他逻辑需要给这个输入框绑定keyup事件，不要用onxxx赋值的方式（会覆盖之前绑定的同类型事件），改用addEventListener/removeEventListener管理事件：

  let currentHandler = filter_tagsA
  let enableFilterC = false
  searchInput.addEventListener('keyup', currentHandler)
  
  toggleBtn.onclick = function() {
    // 先移除当前生效的旧回调
    searchInput.removeEventListener('keyup', currentHandler)
    // 切换到新回调
    enableFilterC = !enableFilterC
    currentHandler = enableFilterC ? filter_tagsC : filter_tagsA
    searchInput.addEventListener('keyup', currentHandler)
  }
  

所有事件绑定场景下，如果你需要传入的是「事件触发时才执行的回调函数」，就不要在传参时给函数名加()。加括号代表立即执行这个函数，拿到执行结果后再参与赋值/传参，和你预期的“注册回调等待触发”逻辑完全不符。

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