如何仅声明一次addEventListener即可复用，无需重复绑定事件监听？

你提到的实现方案是完全可行的，这种技术叫做事件委托（事件代理），核心依赖DOM的事件冒泡机制：子元素触发的事件会逐层向上传播到父级、祖先级元素，因此可以在公共父元素上只绑定一次监听器，通过判断event.target的特征来执行对应逻辑，不需要给每个子元素单独绑定事件。

针对你的代码的改造示例 #

你现在给两个输入框分别绑定了keyup事件，改成用事件委托实现的代码如下：

const wrapper = document.querySelector('.wrapper');
const loginButton = document.querySelector(".login-btn")

function active(e) {
    // 仅当触发事件的元素是我们要监听的账号/密码输入框时才执行逻辑
    if(e.target.matches('#text, #password')) {
        const idInput = document.querySelector("#text");
        const pwInput = document.querySelector("#password");
        loginButton.style.backgroundColor = idInput.value.length && pwInput.value.length ? '#0095F6' : '#B2DFFC';
    }
}

// 仅需给公共父级wrapper绑定一次事件即可
wrapper.addEventListener("keyup", active)

事件委托的优势 #

• 减少重复的事件绑定代码，降低内存占用，尤其适合大量同类元素需要绑定相同事件的场景（比如列表项点击、表格行操作等）
• 对后续动态新增的DOM元素自动生效，不需要每次新增元素时重新绑定事件，比如后续你新增了验证码输入框，只要符合选择器规则，不需要额外加绑定就能触发对应逻辑。

注意事项 #

• 部分事件默认不支持冒泡（比如focus、blur），这类场景可以替换为对应的冒泡版本事件（focusin、focusout）再用事件委托
• 如果父级和触发元素之间有节点调用了e.stopPropagation()阻止冒泡，会导致事件委托失效
• 如果不同元素的事件逻辑差异极大，全堆在同一个父级监听器里会导致代码维护性下降，这种场景更适合分开绑定事件。

你当前的场景只有两个输入框，分开绑定和用事件委托都没有问题，代码复杂度差异不大，可以根据后续项目的扩展需求选择方案。

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