如何在单个div上绑定多个事件处理函数并优化代码？

你的代码功能正常，但确实存在重复的事件绑定，下面提供几种更简洁的优化方式：

方案1：合并重复的事件处理函数（类组件适配） #

在类组件中预先定义通用的显示/隐藏函数，避免重复写箭头函数：

// 类组件内部定义
handleShowTooltip = () => this.showToolTip(true);
handleHideTooltip = () => this.showToolTip(false);

然后在JSX中复用这些函数：

<div
  className="iconWrapper"
  onFocus={this.handleShowTooltip}
  onBlur={this.handleHideTooltip}
  onMouseOver={this.handleShowTooltip}
  onMouseOut={this.handleHideTooltip}
  tabIndex="0"
  role="button"
>
  <Icon width="12" height="12" fillColor="#000" />
</div>

这种方式减少了代码冗余，同时避免了每次渲染都创建新的箭头函数实例。

方案2：纯CSS实现（无JS逻辑） #

如果你的Tooltip是静态内容，完全可以用CSS伪类实现，不需要JavaScript，性能更优：

调整HTML结构，把Tooltip作为图标容器的子元素：

<div className="iconWrapper" tabIndex="0" role="button">
  <Icon width="12" height="12" fillColor="#000" />
  <div className="tooltip">这里是提示文本</div>
</div>

添加CSS样式：

.iconWrapper .tooltip {
  display: none;
  position: absolute;
  /* 补充定位、背景、字体等样式 */
}

/* 鼠标悬停或容器获得焦点时显示Tooltip */
.iconWrapper:hover .tooltip,
.iconWrapper:focus-within .tooltip {
  display: block;
}

优点：零JS开销，代码简洁；缺点：仅适用于静态内容，无法处理动态逻辑或复杂交互。

方案3：单一事件处理函数（根据事件类型判断） #

可以写一个通用处理函数，通过事件类型判断是显示还是隐藏Tooltip：

// 类组件内部定义
handleTooltip = (e) => {
  const isShow = ['focus', 'mouseover'].includes(e.type);
  this.showToolTip(isShow);
};

JSX中绑定所有事件到这个函数：

<div
  className="iconWrapper"
  onFocus={this.handleTooltip}
  onBlur={this.handleTooltip}
  onMouseOver={this.handleTooltip}
  onMouseOut={this.handleTooltip}
  tabIndex="0"
  role="button"
>
  <Icon width="12" height="12" fillColor="#000" />
</div>

这种方式进一步减少了事件绑定的重复代码，逻辑集中在一个函数里。

方案4：自定义Hook封装（函数组件适配） #

如果是函数组件，可以用自定义Hook封装Tooltip的状态和事件逻辑，方便复用：

// 自定义Hook
function useTooltip() {
  const [isVisible, setIsVisible] = useState(false);

  const handlers = {
    onFocus: () => setIsVisible(true),
    onBlur: () => setIsVisible(false),
    onMouseOver: () => setIsVisible(true),
    onMouseOut: () => setIsVisible(false),
  };

  return { isVisible, handlers };
}

在组件中使用：

function MyComponent() {
  const { isVisible, handlers } = useTooltip();

  return (
    <div className="iconWrapper" tabIndex="0" role="button" {...handlers}>
      <Icon width="12" height="12" fillColor="#000" />
      {isVisible && <div className="tooltip">动态提示内容</div>}
    </div>
  );
}

这种方式把Tooltip逻辑抽离出来，多个组件需要Tooltip时可以直接复用，代码更整洁。

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