如何区分事件焦点与TAB键和Shift键?

Question

在有多个焦点元素的DOM中。用户可以使用tab键遍历焦点元素，也可以使用shift + tab键遍历反转。

监听focusin事件，我们如何知道它是由TAB还是Shift TAB触发的?

document.querySelector('#sample').addEventListener('focusin', function(){
if(isFromTAB){
// DO traverse
}else{
// DO different thing
}

});

Answer 1

可以查看事件的relatedTarget属性。对于focusin事件，relatedTarget属性标识失去焦点的元素:

document.querySelector('#b').addEventListener('focusin', (e) => {
if (e.relatedTarget?.id === 'a') {
console.log('tab');
} else if (e.relatedTarget?.id === 'c') {
console.log('shift tab');
}
});

<input id="a">
<input id="b">
<input id="c">