JS实现父元素及后代元素触发焦点时切换至textarea

问题背景 #

现有HTML结构：

<div id="parent">
  <div class="line">
    <span class="word">This </span>
    <span class="word">is  </span>
    <span class="word">a  </span>
    <span class="word">line. </span>
  </div>
  <div class="line">
    <span class="word">This </span>
    <span class="word">is  </span>
    <span class="word">another  </span>
    <span class="word">line. </span>
  </div>
</div>
<textarea id="textarea"></textarea>

其中parent的内容会动态更新，需求是点击parent或其任意后代元素时，自动将焦点设置到textarea。但使用focus事件绑定的代码无效：

let parent = document.getElementById("parent");
let textarea = document.getElementById("textarea");
parent.addEventListener("focus", () => {
     textarea.focus();
})

原因分析 #

div、span这类块级/行内元素默认不支持焦点获取，因此focus事件无法被触发。

解决方法 #

方案1：监听click事件（兼容鼠标点击场景） #

利用事件冒泡机制，直接给parent绑定click事件，不管内部内容如何动态变化，点击后代元素都会触发该事件：

let parent = document.getElementById("parent");
let textarea = document.getElementById("textarea");

parent.addEventListener("click", () => {
    textarea.focus();
});

方案2：同时支持鼠标点击和键盘聚焦（可选） #

如果需要支持通过键盘Tab键聚焦到parent时也触发焦点切换，可以给parent添加tabindex="-1"属性（使其可聚焦但不纳入Tab键导航顺序），同时监听click和focus事件：
修改后的HTML：

<div id="parent" tabindex="-1">
  <!-- 原有内容 -->
</div>

对应的JS代码：

let parent = document.getElementById("parent");
let textarea = document.getElementById("textarea");

parent.addEventListener("click", () => textarea.focus());
parent.addEventListener("focus", () => textarea.focus());

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