Comment identifier les éléments déclenchant des événements de flou dans le développement Web ?

Identification des éléments impliqués dans les événements de flou

Dans le développement Web, il est souvent nécessaire de suivre les changements de focus entre les éléments. Considérons un scénario dans lequel une zone de saisie HTML a un écouteur d'événement Blur :

<code class="html"><input id="myInput" onblur="myBlurHandler()" /></code>

Lorsqu'un élément autre que myInput obtient le focus, l'événement Blur se déclenche et la fonction myBlurHandler() est exécutée. Cependant, au sein de cette fonction, comment pouvez-vous déterminer quel élément a déclenché l'événement ?

Selon UI Events, la propriété RelatedTarget de l'événement peut être utilisée à cette fin. Pour les événements de flou, RelatedTarget fait référence à la cible de l'événement recevant le focus :

<code class="js">function myBlurHandler(event) {
  let focusedElement = event.relatedTarget;
  // Your custom logic here
}</code>

Cela vous permet d'accéder à l'élément qui a provoqué le déclenchement de l'événement de flou, comme démontré dans l'exemple ci-dessous :

<code class="js">function blurListener(event) {
  event.target.classList.add('blurred');
  if (event.relatedTarget) event.relatedTarget.classList.add('focused');
}
document.querySelectorAll('input').forEach(el => el.addEventListener('blur', blurListener, false));</code>

Dans cet exemple, les éléments d'entrée deviendront orange lorsqu'ils perdront le focus et l'élément qui reçoit le focus deviendra citron vert, ce qui facilitera le suivi visuel de la transition de focus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!