鼠标悬停按钮切换文本框内容的多按钮JS优化方案

你当前的写法存在大量重复逻辑：单独获取每个按钮DOM、单独给每个按钮绑定两个事件、为每个按钮单独编写悬停处理函数，当按钮数量扩展到20个时，代码会变得非常臃肿，增删按钮、修改对应文本都需要改动JS逻辑，维护成本很高。
推荐使用事件委托+自定义数据属性的方案实现，核心逻辑只需要写一次，后续不管加多少按钮都不需要改动JS代码。

核心思路 #

• 给所有触发悬停效果的按钮加统一的类名，不再为每个按钮设置独立的序号类名
• 将按钮悬停时需要展示的文本直接存在按钮的data-text自定义属性上，文本和按钮本身绑定，不需要在JS中硬编码文本映射关系
• 利用事件冒泡机制，只给所有按钮的共同父容器绑定1次mouseover、mouseout事件，不需要遍历每个按钮单独绑定事件
• 事件触发时判断触发源是否为目标按钮，如果是就读取按钮上存储的自定义文本更新到文本框，鼠标移出时还原默认文本

完整实现代码 #

HTML #

<div class="button-box">
    <button class="hover-btn" data-text="Hovering over button 1">Button 1</button>
    <button class="hover-btn" data-text="Hovering over button 2">Button 2</button>
    <button class="hover-btn" data-text="Hovering over button 3">Button 3</button>
    <!-- 后续扩展20个按钮直接按相同格式新增即可，无需修改JS -->
</div>

<p class="text-box">See details here</p>

CSS #

和原有样式完全一致，无需改动：

.text-box {
    width: 400px;
    height: 100px;
    border: 1px solid blue;
}

JS #

const buttonContainer = document.querySelector('.button-box');
const textBox = document.querySelector('.text-box');
const DEFAULT_TEXT = 'See details here';

// 仅在父容器上绑定一次事件，处理所有子按钮的悬停逻辑
buttonContainer.addEventListener('mouseover', (e) => {
    // 向上查找最近的按钮元素，兼容按钮内部存在图标、子标签的场景
    const activeBtn = e.target.closest('.hover-btn');
    if (activeBtn && buttonContainer.contains(activeBtn)) {
        textBox.textContent = activeBtn.dataset.text;
    }
});

buttonContainer.addEventListener('mouseout', (e) => {
    const activeBtn = e.target.closest('.hover-btn');
    if (activeBtn && buttonContainer.contains(activeBtn)) {
        textBox.textContent = DEFAULT_TEXT;
    }
});

方案优势 #

• 扩展成本极低：新增按钮只需要在HTML中按格式添加标签、配置对应data-text属性即可，不需要修改任何JS逻辑，哪怕后续加几十上百个按钮也一样
• 性能更好：整个功能只需要绑定2个事件监听器，不会因为按钮数量增加额外的内存开销
• 维护方便：修改按钮对应显示文本时，直接修改对应HTML标签上的data属性即可，不需要到JS代码里找对应的处理函数
• 容错率高：不会出现某个按钮漏绑事件、绑定错处理函数的问题

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