Comment identifier l'élément provoquant un événement de flou en HTML ?

Détermination de l'élément cible déclenchant un événement de flou

Lorsque vous gérez des événements de flou dans un élément d'entrée HTML, vous vous demandez peut-être comment identifier le élément qui a provoqué le changement de focus. Cet article explore les méthodes permettant d'obtenir l'ID de l'élément déclencheur.

Dans l'extrait de code fourni, l'événement flou est attaché à un champ de saisie. Cependant, le défi réside dans la détermination de l'élément qui a initié l'événement de flou, comme un élément span cliquable.

Solution utilisant la propriété RelatedTarget

Selon la spécification Event Target , la propriété RelatedTarget de l'objet événement fournit des informations sur l'élément qui a obtenu le focus après l'événement de flou. Pour les événements de flou :

relatedTarget: event target receiving focus

Exemple :

function blurListener(event) {
  event.target.className = 'blurred';
  if (event.relatedTarget)
    event.relatedTarget.className = 'focused';
}

// Add blur listeners to all input elements
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

En attachant cet écouteur de flou aux éléments d'entrée, vous pouvez identifier l'élément déclencheur lorsqu'il obtient le focus ( className = 'focused') et changez le className de l'élément d'entrée flou en 'blurred'.

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!