Události zaměření zahrnují související vlastnost Target

Dnes jsem narazil na stránku MDN popisující relatedTarget vlastnost ohniskových událostí. blur , focus , focusin a focusout počítat jako hlavní události.

Ukázalo se, že pokud připojíte focus posluchač události spouštěná událost nebude obsahovat pouze target prvek, ale také relatedTarget prvek.

document.querySelector('button')
  .addEventlistener('focus', (event) => {
    console.log(event.target);        
    // 👆 the element that received focus
    console.log(event.relatedTarget); 
    // 👆 the element that lost focus (if any)
  });

Pravidla pro target a relatedTarget v zaměření události jsou následující:

Název události cíl relatedTarget
focus zaměření prvku prvek ztrácí zaměření
blur prvek ztrácí zaměření zaměření prvku
focusin zaměření prvku prvek ztrácí zaměření
focusout prvek ztrácí zaměření zaměření prvku

Pomocí relatedTarget , můžete zjistit, jaký byl dříve zaměřený prvek, když uživatel "tabuje" ve vašem rozhraní.

relatedTarget může být také null když nebyl žádný předchozí/následující cíl. To se stane například tehdy, když bylo aktivní tlačítko a uživatel klikne na něco, na co nelze zaostřit.

To je pro mě úplná novinka! 😲

Pokud si chcete pohrát a vidět nemovitost v akci, postavil jsem rychlý prototyp na CodePen.