javascript - 有没有办法在父容器上编写事件监听器以捕获其所有输入元素上的焦点/模糊事件？

Question

这是一个丑陋的例子，但你能告诉我是否有办法让 input 元素(绿色边框)的 focus 事件被捕获父表事件监听器，如 change 事件一样，无需为每个单独的输入元素分配事件监听器。

document.querySelector('table.two').addEventListener('change', () => {
  console.log('change event');
}, false);

document.querySelector('table.two').addEventListener('focus', () => {
  console.log('focus event');
}, false);

table {
  border-spacing: 0;
  border-collapse: separate;
  margin: 0 auto;
}

td {
  border: 1px solid rgb(150, 150, 150);
  border-top-color: transparent;
  padding: 0 20px;
  background-color: white;
}

tr:first-child td {
  border-top-color: rgb(150, 150, 150);
}

td>div {
  width: 300px;
  height: 50px;
  margin: 10px auto;
  border: 1px solid rgb(150, 150, 150);
  background-color: white;
}

tr.sel {
  position: relative;
  box-shadow: 4px 4px 3px rgb(50, 50, 50);
}

td>div.sel {
  position: relative;
  z-index: 20;
  border-color: blue;
}

input {
  width: 280px;
  border: 1px solid green;
}

<table class="two">
  <tbody>
    <tr class="sel">
      <td>
        <div></div>
        <div class="sel"><input type='text'></div>
        <div></div>
      </td>
    </tr>

    <tr>
      <td>
        <div></div>
        <div><input type='text'></div>
        <div></div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

问题是 focus 事件不会冒泡 - 它不会传播到父级。幸运的是，您可以使用另一个事件来实现冒泡 - focusin:

document.querySelector('table.two')
    .addEventListener( 'focusin', () => {
        console.log( 'focus event' ); 
    }, false );

有关此内容的更多信息，请参阅文档:

https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event

https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event