这是一个丑陋的例子,但你能告诉我是否有办法让 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>
最佳答案
问题是 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
关于javascript - 有没有办法在父容器上编写事件监听器以捕获其所有输入元素上的焦点/模糊事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56677999/