Web开发中如何识别触发模糊事件的元素？

识别模糊事件中涉及的元素

在 Web 开发中，通常需要跟踪元素之间的焦点变化。考虑 HTML 输入框具有模糊事件侦听器的场景：

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

当 myInput 以外的元素获得焦点时，将触发模糊事件并执行 myBlurHandler() 函数。但是，在这个函数中，如何确定哪个元素触发了事件？

根据 UI Events，事件的 relatedTarget 属性可以用于此目的。对于模糊事件，相关目标指的是接收焦点的事件目标：

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

这允许您访问导致模糊事件触发的元素，如下例所示：

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

在此示例中，输入元素在失去焦点时将变成橙色，而接收焦点的元素将变成石灰，从而可以轻松地直观地跟踪焦点转换。

以上是Web开发中如何识别触发模糊事件的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！