How to Identify Elements Triggering Blur Events in Web Development?

Identifying Elements Involved in Blur Events

In web development, it's often necessary to track focus changes between elements. Consider a scenario where an HTML input box has a blur event listener:

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

When an element other than myInput gains focus, the blur event fires and the myBlurHandler() function is executed. However, within this function, how can you determine which element triggered the event?

According to UI Events, the relatedTarget property of the event can be used for this purpose. For blur events, relatedTarget refers to the event target receiving focus:

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

This allows you to access the element that caused the blur event to fire, as demonstrated in the example below:

<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>

In this example, input elements will turn orange when they lose focus and the element that receives focus will turn lime, making it easy to track the focus transition visually.

The above is the detailed content of How to Identify Elements Triggering Blur Events in Web Development?. For more information, please follow other related articles on the PHP Chinese website!