EventTarget事件:focus

2019-01-22 14:17 更新

EventTarget事件 - focus

当元素获得焦点时,focus事件将触发。这个事件和focusin之间的主要区别在于只有后者冒泡。

注意:与focus相反的是blur。

基本信息

接口FocusEvent
同步/异步同步
是否冒泡没有
是否可取消没有
目标Window, Element
是否组合
默认操作没有

属性

属性类型描述
target(只读)EventTarget事件目标(DOM元素)
type(只读)DOMString事件的类型。
bubbles(只读)Boolean事件是否正常冒泡。
cancelable(只读)Boolean事件是否可以取消。
relatedTarget(只读)EventTarget (DOM元素)null

示例

事件授权

有两种方法可以为此事件实现事件授权:通过使用focusin事件或将addEventListener()的useCapture参数设置为true。

请参阅blur参考页面上此示例的代码。

Window focus

此示例在失去焦点时更改文档的外观。它使用addEventListener()来监视focus和blur事件。

HTML

<p id="log">Click on this document to give it focus.</p>

CSS

.paused {
  background: #ddd;
  color: #555;
}

JavaScript的

function pause() {
  document.body.classList.add('paused');
  log.textContent = 'FOCUS LOST!';
}

function play() {
  document.body.classList.remove('paused');
  log.textContent = 'This document has focus.';
}

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

window.addEventListener('blur', pause);
window.addEventListener('focus', play);

规范

规范状态注释
UI事件Working Draft
添加了此事件的组成信息
文档对象模型(DOM)3级事件规范Obsolete
初步定义

浏览器兼容性Section

我们将兼容性数据转换为机器可读的JSON格式。

  • 电脑端

Chrome
Edge
Firefox(Gecko)Internet ExplorerOperaSafari
基本支持支持支持支持支持支持支持
  • 移动端
特征Android适用于Android的ChromeEdge
Firefox Mobile(Gecko)IE MobileOpera MobileSafari Mobile
基本支持?支持

在Firefox 24之前该接口是Event。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号