纯JS如何合并两个实现网站搜索窗口关闭功能的事件监听函数

你可以通过抽离公共逻辑或者合并判断分支的方式完成复用，两种实现如下：

方案1：抽离公共关闭逻辑（更推荐，可读性和可维护性更高） #

把重复执行的关闭操作单独封装成函数，两个事件监听中各自做触发条件判断后调用即可：

// 公共关闭逻辑
const closeSearch = (event) => {
  body.classList.remove('search-opened');
  event.stopPropagation();
}

// 按ESC关闭
searchOverlay.addEventListener('keydown', function(event){
  if(event.key === "Escape") closeSearch(event);
});

// 点击区域外关闭
searchOverlay.addEventListener('click', function (e) {
  if (e.target.closest('.search-inner') === null) closeSearch(e);
});

方案2：合并为单个事件处理函数 #

如果要完全合并成一个函数，可以在函数内部判断事件类型走对应校验逻辑：

const handleSearchClose = (event) => {
  let isCloseTrigger = false;
  // 根据事件类型做不同判断
  switch(event.type) {
    case 'keydown':
      isCloseTrigger = event.key === "Escape";
      break;
    case 'click':
      isCloseTrigger = event.target.closest('.search-inner') === null;
      break;
  }
  if (isCloseTrigger) {
    body.classList.remove('search-opened');
    event.stopPropagation();
  }
}

// 两个事件绑定同一个处理函数
searchOverlay.addEventListener('keydown', handleSearchClose);
searchOverlay.addEventListener('click', handleSearchClose);

两种方案都可以实现逻辑复用，第一种拆分的方式后续如果要修改关闭逻辑只需要修改closeSearch一处即可，更推荐使用。

内容的提问来源于stack exchange，提问作者Лео