En un DOM donde hay múltiples elementos de enfoque. El usuario puede atravesar los elementos de enfoque usando tabulador, o atravesar en reversa usando shift + tabulador.
Al escuchar el evento focusin, ¿cómo podemos saber si fue activado por TAB o Shift TAB?
document.querySelector('#sample').addEventListener('focusin', function(){ if(isFromTAB){ // DO traverse }else{ // DO different thing } });Puede verificar la propiedad de relatedTarget del evento. Para un evento focusin , la propiedad relatedTarget identifica el elemento que perdió el foco:
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">