JS blur事件|极客笔记

JS blur事件

1. 介绍

在JavaScript中，blur事件是一种常见的事件类型，用于当元素失去焦点时触发。它可以应用于大多数HTML元素，包括输入框、按钮、select下拉菜单等。

当用户在浏览器中点击其他地方或按下Tab键时，会导致当前元素失去焦点，从而触发blur事件。开发者可以通过监听blur事件来执行一些自定义的逻辑，例如表单验证、自动保存数据等。

本文将详细解释blur事件的基本使用、事件触发时机、应用举例等内容，并附上JavaScript代码示例。

2. 基本用法

在JavaScript中，我们可以通过addEventListener()方法为元素添加blur事件的监听函数。该方法接受两个参数，分别是事件类型和事件处理函数。

下面是一个简单的示例，演示如何为输入框添加blur事件监听：

// HTML
<input type="text" id="myInput">

// JavaScript
const input = document.getElementById('myInput');

input.addEventListener('blur', function() {
  console.log('Input field lost focus');
});

在这个示例中，我们为id为”myInput”的输入框添加了blur事件的监听函数。当该输入框失去焦点时，控制台会输出”Input field lost focus”。

请注意，当元素失去焦点时，该元素上的blur事件会被触发，而不是其父元素。因此，如果您想为父元素下的多个子元素都添加blur事件监听，需要分别为它们添加监听函数。

3. 事件触发时机

blur事件的触发时机主要有两种情况：

3.1 浏览器窗口失去焦点

当用户将焦点从浏览器窗口切换到其他窗口或标签时，文档中的所有元素都将失去焦点。这时，失去焦点的元素上会触发blur事件，我们可以通过监听该事件来执行一些操作。

// HTML
<input type="text" id="myInput">

// JavaScript
window.addEventListener('blur', function() {
  console.log('Browser window lost focus');
});

const input = document.getElementById('myInput');

input.addEventListener('blur', function() {
  console.log('Input field lost focus');
});

在这个示例中，我们为浏览器窗口和输入框分别添加了blur事件的监听函数。当用户将焦点从浏览器窗口切换到其他地方时，控制台会输出”Browser window lost focus”，而当输入框失去焦点时，控制台会输出”Input field lost focus”。

3.2 元素失去焦点

除了窗口失去焦点时触发blur事件，元素本身也会在失去焦点时触发该事件。这种情况下，只有失去焦点的元素上的blur事件会被触发。

// HTML
<input type="text" id="input1">
<input type="text" id="input2">

// JavaScript
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

input1.addEventListener('blur', function() {
  console.log('Input 1 lost focus');
});

input2.addEventListener('blur', function() {
  console.log('Input 2 lost focus');
});

在这个示例中，我们为两个输入框分别添加了blur事件的监听函数。当其中一个输入框失去焦点时，控制台会输出相应的提示信息。

4. 应用举例

4.1 表单验证

有时候我们需要在用户离开输入框时对输入的内容进行验证，确保输入的数据符合要求。这种情况下，可以使用blur事件来执行验证操作。

// HTML
<input type="text" id="emailInput">
<div id="errorText"></div>

// JavaScript
const emailInput = document.getElementById('emailInput');
const errorText = document.getElementById('errorText');

emailInput.addEventListener('blur', function() {
  if (!emailInput.value.includes('@')) {
    errorText.textContent = '请输入有效的邮箱地址';
  } else {
    errorText.textContent = '';
  }
});

在这个示例中，我们为一个邮箱输入框添加了blur事件的监听函数。当用户离开输入框时，会检查输入的内容是否包含”@”符号，如果不包含，则通过文本内容显示错误信息。

4.2 自动保存数据

有时候我们需要在用户离开输入框时自动保存输入的数据，以防止丢失。可以使用blur事件来监听输入框的失去焦点事件，并在事件触发时保存数据。

// HTML
<textarea id="textInput"></textarea>
<button id="saveButton">保存</button>

// JavaScript
const textInput = document.getElementById('textInput');
const saveButton = document.getElementById('saveButton');

textInput.addEventListener('blur', function() {
  localStorage.setItem('savedText', textInput.value);
});

saveButton.addEventListener('click', function() {
  localStorage.setItem('savedText', textInput.value);
  alert('保存成功！');
});

在这个示例中，我们为一个文本输入框添加了blur事件的监听函数。当用户离开输入框时，会自动将输入框中的内容保存到本地存储中。此外，我们还为一个保存按钮添加了点击事件的监听函数，以便在用户手动点击保存时也能保存数据。