焦点事件包括一个 relatedTarget 属性

最新推荐文章于 2025-05-30 09:04:20 发布

紫微前端

最新推荐文章于 2025-05-30 09:04:20 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125328526

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文探讨了焦点事件中的relatedTarget属性，该属性用于跟踪用户在界面中切换焦点时的前后元素变化。在JavaScript和Vue.js等前端开发中，这个属性对于处理交互和导航非常有用，特别是在用户点击非聚焦元素导致按钮失去焦点的情况下。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果您附加一个focus事件侦听器，则触发的事件将不仅包括一个target元素，还包括一个relatedTarget元素。

document.querySelector('button')
  .addEventlistener('focus', (event) => {
    console.log(event.target);        
    // 👆 the element that received focus
    console.log(event.relatedTarget); 
    // 👆 the element that lost focus (if any)
  });

target焦点事件和焦点事件的规则relatedTarget如下：