EventTarget事件:blur
2019-01-19 17:31 更新
EventTarget事件 - blur
当一个元素失去焦点时触发blur事件。这个事件和焦点间的主要区别在于只有后者才会出现冒泡。
注意:与blur相反的是focus。
基本信息
接口 | FocusEvent |
---|---|
同步/异步 | 同步 |
是否冒泡 | 没有 |
是否可取消 | 没有 |
目标 | Window , Element |
组成的 | 是 |
默认操作 | 没有 |
属性
属性 | 类型 | 描述 |
---|---|---|
target (只读) | EventTarget | 事件目标(DOM元素) |
type (只读) | DOMString | 事件的类型。 |
bubbles (只读) | Boolean | 事件是否正常冒泡。 |
cancelable (只读) | Boolean | 事件是否可以取消。 |
relatedTarget (只读) | EventTarget (DOM元素) | 事件目标接收焦点(DOM元素)。 |
事件授权
有两种方法可以为此事件实现事件委派:通过使用focusout事件或通过将addEventListener()的useCapture参数设置为true。
HTML
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
JavaScript
var form = document.getElementById('form');
form.addEventListener('focus', function( event ) {
event.target.style.background = 'pink';
}, true);
form.addEventListener('blur', function( event ) {
event.target.style.background = '';
}, true);
规范
规范 | 状态 | 注释 |
---|---|---|
UI事件 | Working Draft | 添加了此事件的组成信息。 |
文档对象模型(DOM)3级事件规范 | Obsolete | 初步定义 |
浏览器兼容性
我们将兼容性数据转换为机器可读的JSON格式。
- 电脑端
Chrome | Edge | Firefox(Gecko) | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|---|
基本支持 | 支持:5 | 支持 | 支持 | 支持:6 | 支持:12.1 | 支持:5.1 |
- 移动端
Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | |
---|---|---|---|---|---|---|---|
基本支持 | 支持:4.0 | 支持:53 | 支持 | ? | 支持:10.0 | 支持:12.1 | 支持:5.1 |
以上内容是否对您有帮助:
更多建议: