如何在没有tabindex = 0的情况下将事件监听器添加到div？

Question

我有这样的控件：

我需要跟踪此控件内任何元素的焦点。如果我聚焦输入或如果我聚焦（单击）日历图标，我想知道执行的聚焦。

我的想法是在输入+日历触发器的包装上添加点击监听器。是一些div。

开箱即用，我无法将焦点侦听器添加到div中。为此，我需要在此div中添加tabindex=0。此方法可以使用，但是要减去一。

例如，我有很多控件的表格。示例代码如下：

<div class="container">
  <input onfocus="onFocus()" />
  <div tabindex="0" onfocus="onFocus()">some div</div>
  <div tabindex="0" onfocus="onFocus(event.target)">
    <input onfocus="onFocus()" />
  </div>
  <input onfocus="onFocus()" />
</div>

当我专注于第一个输入并开始通过TAB键循环时，我想要这样的行为：聚焦日历图标，聚焦下一输入，聚焦下一日历图标等。但是使用tabindex=0可以打破这种行为。您可以在this pen中进行检查。您可以在some div阻止之后看到这种损坏的行为。

好吧，我还有另一个选项可以专门为输入和日历图标（或任何其他图标）添加侦听器。问题是我在每个字段上都有大量的图标。而且我必须为每个添加焦点侦听器。对于我（和另一位开发人员）来说，最简单的方法是当我只在顶部（我认为）有一个焦点侦听器时。

是否可以在不中断焦点循环的情况下增加向div添加焦点侦听器的功能（如我在codepen示例中所示）。

Answer 1

使用element.addEventListener('focusin', handler)。 focus和blur不会冒泡，focusin和focusout会冒泡。

document.querySelector('.container')
  .addEventListener('focusin', function(event) {
    console.log(event.target)
  })

<div class="container">
  <input name="a" />
  <div contenteditable="true">some div</div>
  <div>
    <input name="b" />
  </div>
  <input name="c"/>
</div>