元素：focus 事件

focus 事件在元素获取焦点时触发。这个事件和 focusin (en-US) 最大的区别仅仅在于后者会事件冒泡。

focus 与 blur 正好相反。

该事件不可取消，也不会冒泡。

语法

在象 addEventListener() 这样的方法中使用事件名称或设置事件处理器属性。

addEventListener('focus', (event) => { });

onfocus = (event) => { };

事件属性

该接口还从其父级 UIEvent 和 Event 继承属性。

FocusEvent.relatedTarget (en-US): 一个 EventTarget，表示此事件的次要目标。在某些情况下（例如切换到当前标签页或离开当前标签页），处于安全原因，该属性可能会被设置为 null。

示例

简单示例

HTML

html

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

结果

事件委托

此事件有两个可以实现事件委托的方法：通过在支持的浏览器上使用 focusin (en-US) 事件，或者通过设置 addEventListener() 的参数useCapture 值为 true。

HTML

html

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

const form = document.getElementById('form');

form.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', (event) => {
  event.target.style.background = '';
}, true);

结果

规范

Specification
UI Events # event-type-focus
HTML Standard # handler-onfocus

浏览器兼容性

BCD tables only load in the browser

参见

相关的事件：blur、focusin (en-US)、focusout
在 Window 目标上的该事件：focus 事件
Focusing: focus/blur