元素:focus 事件
语法
在象 addEventListener()
这样的方法中使用事件名称或设置事件处理器属性。
addEventListener('focus', (event) => { });
onfocus = (event) => { };
事件属性
该接口还从其父级 UIEvent
和 Event
继承属性。
-
一个
EventTarget
,表示此事件的次要目标。在某些情况下(例如切换到当前标签页或离开当前标签页),处于安全原因,该属性可能会被设置为null
。
示例
简单示例
HTML
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
结果
事件委托
此事件有两个可以实现事件委托的方法:通过在支持的浏览器上使用 focusin
(en-US) 事件,或者通过设置 addEventListener()
的参数useCapture
值为 true
。
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