识别模糊事件中涉及的元素
在 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中文网其他相关文章！
