Question

这是一个丑陋的示例，但是请您告诉我是否有一种方法可以让父表事件侦听器捕获focus元素的input事件（绿色边框），就像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

有没有一种方法可以在父容器上编写事件侦听器的代码，以捕获其所有输入元素上的焦点/模糊事件？

1 个答案: