HTML | DOM焦点事件

焦点事件是指在web页面中，与焦点相关的事件。当一个元素获得焦点时（例如通过点击或使用tab键），会触发onfocus事件。当一个元素失去焦点时（通过点击到其他元素或按下tab键移到其他元素时），会触发onblur事件。

事件类型

| 事件 | 描述 | | --- | --- | | onblur | 当元素失去焦点时触发 | | onfocus | 当元素获得焦点时触发 | | onfocusin | 当元素即将获得焦点时触发 | | onfocusout | 当元素即将失去焦点时触发 |

事件属性

焦点事件的事件属性是事件对象，可以用来获取相关信息。以下是一些常用的事件属性：

| 属性 | 描述 | | --- | --- | | target | 触发事件的元素 | | type | 触发事件的类型 | | relatedTarget | 与焦点事件相关的元素 | | eventPhase | 事件的阶段（捕获或冒泡） |

DOM示例

在DOM中，可以使用addEventListener方法来绑定焦点事件。

const input = document.querySelector('input');

input.addEventListener('focus', function() {
  console.log('Input获得焦点');
});

input.addEventListener('blur', function() {
  console.log('Input失去焦点');
});

HTML示例

在HTML中，可以使用onfocus和onblur属性来绑定焦点事件。

<input type="text" onfocus="console.log('Input获得焦点')" onblur="console.log('Input失去焦点')">