当一个模糊的事件发生时，我怎样才能找出哪一个元素焦点被转到了？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会遇到需要知道当前焦点在哪个元素上的情况。例如，当用户通过 tab 键切换焦点时，我们可能需要触发相应的交互操作。但是，有时候我们可能无法确定哪个元素具有焦点，尤其是在复杂的页面结构下。

那么，当这种“模糊”的事件发生时，我们该如何找出焦点所在的元素呢？接下来，本文将介绍一些方法和技巧，帮助你解决这个问题。

1. 使用 document.activeElement

document.activeElement 是一个 DOM 元素，它表示当前具有焦点的元素。在大多数情况下，我们可以使用这个属性来确定当前焦点所在的元素。

const activeElement = document.activeElement;

然后，我们就可以对 activeElement 进行进一步的操作，例如获取它的 tagName、id 或 class 等属性。

const tagName = activeElement.tagName;
const id = activeElement.id;
const className = activeElement.className;

但是，需要注意的是，只有在当前窗口或框架具有焦点时，才能够正确地访问 document.activeElement 属性。如果没有焦点，或者焦点在其他窗口中，这个属性将返回 null。

2. 监听 focus 和 blur 事件

除了使用 document.activeElement 属性外，我们还可以通过监听焦点变化的事件来找出当前具有焦点的元素。在 HTML 中，我们可以使用 tabindex 属性为元素添加一个可聚焦的标识符，然后在 JavaScript 中监听该元素的 focus 和 blur 事件。

<div tabindex="0" id="myDiv">Hello, World!</div>

// javascriptcn.com code example
const myDiv = document.getElementById('myDiv');

myDiv.addEventListener('focus', function() {
  console.log('myDiv 获得焦点');
});

myDiv.addEventListener('blur', function() {
  console.log('myDiv 失去焦点');
});

当 myDiv 元素获得焦点时，会触发 focus 事件，并输出日志信息。同样地，当 myDiv 元素失去焦点时，会触发 blur 事件。通过监听这些事件，我们可以准确地知道当前焦点所在的元素是哪个。

需要注意的是，在使用 tabindex 属性时，要确保它的值是合法的。tabindex 属性的值为正整数时，表示元素在 tab 键顺序中的顺序。如果 tabindex 属性的值为负数或非数字，则表示元素不能被 tab 键访问，但仍然可以通过 JavaScript 代码设置焦点。

3. 使用第三方库

除了上述方法外，我们还可以借助一些第三方库来解决这个问题。例如，可以使用 jQuery 的 :focus 伪类选择器来获取当前具有焦点的元素。

const activeElement = $(':focus')[0];

同样地，也可以使用其他类似的库或插件来实现相同的功能。但是，需要注意的是，在使用第三方库时，要确保它的稳定性和兼容性，并且避免过度依赖。

总结

当一个模糊的事件发生时，我们可以采取多种方法来找出当前具有焦点的元素。使用 document.activeElement 属性可以快速地获取当前焦点所在的元素，但需要注意浏览器兼容性和窗口焦点问题。监听 focus 和 blur 事件可以准确地知道当前焦点所在的元素，但需要为元素

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/9913