js div绑定焦点事件

在JavaScript中，为div元素绑定焦点事件，可以使用addEventListener方法。由于div默认不可聚焦，需要先通过设置tabindex属性使其可聚焦。

以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div id="myDiv" tabindex="0">可聚焦的div</div>

    <script>
        const myDiv = document.getElementById('myDiv');
        myDiv.addEventListener('focus', function () {
            console.log('div获得焦点');
            myDiv.style.backgroundColor = 'lightgreen';
        });
        myDiv.addEventListener('blur', function () {
            console.log('div失去焦点');
            myDiv.style.backgroundColor = 'lightblue';
        });
    </script>
</body>

</html>

一、基础概念

焦点事件（focus/blur）
- focus事件：当元素获得焦点时触发。例如用户点击一个可聚焦元素或者使用Tab键导航到该元素时。
- blur事件：当元素失去焦点时触发。

tabindex属性
- 它用于指定元素在Tab键导航顺序中的位置。设置为0表示按照文档流顺序参与Tab键导航；设置为负数（如- 1）表示元素可以通过JavaScript等方式聚焦，但不参与Tab键导航顺序。

二、优势

用户体验提升
- 可以根据元素的焦点状态改变样式或者执行特定操作，让用户清楚当前操作的焦点所在区域。例如在表单中高亮显示当前正在编辑的输入框所在的容器（如果容器是div）。

无障碍访问
- 对于使用辅助技术（如屏幕阅读器）的用户，焦点事件可以更好地引导他们了解页面的交互流程。

三、类型（这里主要是两种主要的焦点事件类型）

focus事件类型
- 普通的focus事件，当元素获得焦点时触发基本的交互逻辑。

focusin和focusout事件（类似blur和focus，但有区别）
- focusin事件在元素即将获得焦点时触发，并且会冒泡；focusout事件在元素即将失去焦点时触发，也会冒泡。而focus和blur不会冒泡。

四、应用场景

导航菜单
- 当鼠标悬停或者聚焦到某个菜单项（可能是div包裹的菜单内容）时，显示子菜单或者改变菜单的样式。

模态对话框
- 当模态对话框（通常是一个覆盖整个页面的div结构）获得焦点时，可以阻止用户与其他页面内容交互，并且在失去焦点时进行相应的处理（如关闭对话框）。

五、可能遇到的问题及解决方法

div无法聚焦
- 问题原因：div默认不可聚焦，如果没有设置tabindex属性或者设置为不可聚焦的值（如tabindex = "-1"且没有通过JavaScript聚焦）。
- 解决方法：设置tabindex = "0"或者通过JavaScript调用focus()方法并确保元素可聚焦（例如没有设置pointer - events: none等阻止聚焦的样式）。

焦点事件不触发
- 问题原因：
  - 可能是事件绑定代码在元素加载之前执行，导致没有绑定到正确的元素上。
  - 元素虽然设置了tabindex但仍然无法获得焦点（例如父元素设置了pointer - events: none等影响子元素聚焦的样式）。
- 解决方法：
  - 将事件绑定代码放在window.onload事件或者DOMContentLoaded事件处理函数内部，确保元素已经存在于DOM中。
  - 检查元素的样式以及其父元素的样式，确保没有阻止聚焦的情况。