如何创建JavaScript中可复用的全局addEventListener函数处理多事件

我现在有两段独立的代码，分别处理输入框的keypress事件（按下Enter时把输入值赋值给列表项）和按钮的click事件（点击时执行同样的赋值操作）。代码能正常工作，但我想把逻辑复用，用一个更通用的函数来适配这两种触发场景。

当前代码如下：

const inputEl = document.getElementById("input-el");
const listItems = document.getElementById("list-items");
const addBtn = document.getElementById("add-btn");

inputEl.addEventListener("keypress", function(event) {
     if (event.key === "Enter"){
     listItems.innerHTML = inputEl.value
     }
});
addBtn.addEventListener("click", function() {
     listItems.innerHTML = inputEl.value
})

<input type="text" id="input-el">

<button id="add-btn">Add to List</button>

<ul id="list-items"></ul>

解决方案1：提取核心逻辑函数（最直观的复用方式） #

把重复的赋值逻辑抽成独立函数，然后在两个事件回调里按需调用，代码清晰易维护：

const inputEl = document.getElementById("input-el");
const listItems = document.getElementById("list-items");
const addBtn = document.getElementById("add-btn");

// 抽离核心操作到单独函数
function updateListContent() {
  listItems.innerHTML = inputEl.value;
}

// 键盘事件：判断Enter键后执行
inputEl.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    updateListContent();
  }
});

// 点击事件：直接调用核心函数
addBtn.addEventListener("click", updateListContent);

以后要修改赋值逻辑，只需要改动updateListContent这一个函数即可，不用在两个地方重复修改。

解决方案2：通用事件处理函数（适配多事件类型） #

如果想让一个函数直接适配两种事件，可以在函数内部判断事件类型和触发条件：

const inputEl = document.getElementById("input-el");
const listItems = document.getElementById("list-items");
const addBtn = document.getElementById("add-btn");

// 通用处理函数，自动适配点击和键盘事件
function handleAddAction(event) {
  // 键盘事件：只响应Enter键，其他按键直接返回
  if (event.type === "keypress" && event.key !== "Enter") {
    return;
  }
  // 执行核心赋值逻辑
  listItems.innerHTML = inputEl.value;
}

// 给两个元素绑定同一个处理函数
inputEl.addEventListener("keypress", handleAddAction);
addBtn.addEventListener("click", handleAddAction);

这个函数会自动识别事件类型：如果是键盘事件，先检查是否为Enter键；如果是点击事件，直接执行逻辑。这样两个事件监听共用同一个函数，减少代码冗余。

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