博客

jQuery focusout事件

  • Post category:jquery

jQuery focusout()事件在元素失去焦点时触发。该事件类似于blur()事件，但是focusout()事件可以冒泡，而blur()事件不会冒泡。

以下是focusout()事件的详细攻：

语法

$(selector).focusout(function)

参数

  • selector：必需，用于选择要绑定事件的元素。
  • function：必需，用于指定要绑定的事件处理程序。

示例1：绑定focusout事件

以下示例演示了如何使用jQuery focusout()方法绑定focusout事件：

<!DOCTYPE>
<html>
<head>
  <title>jQuery focusout() Method</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="myInput">

  <script>
    $('#myInput').focusout(function() {
      console.log('Input lost focus');
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个文本输入框，并使用jQuery focusout()方法绑定了一个事件处理程序。在事件处理程序中，我们使用console.log()方法记录输入框失去焦点的事件。

示例2：绑定多个focusout事件

以下示例演示了如何使用jQuery focusout()方法绑定多个focusout事件：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery focusout() Method</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="myInput">
  <button id="myButton">Click me</button>

  <script>
    $('#myInput').focusout(function() {
      console.log('Input lost focus');
    });

    $('#myButton').focusout(function() {
      console.log('Button lost focus');
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个文本输入框和一个按钮，并使用jQuery focusout()方法分别绑定了两个事件处理程序。在事件处理程序中，我们使用console.log()方法记录输入框和按钮失去焦点的事件。

注意事项

  • jQuery focusout()事件在元素失去焦点时触发。
  • focusout()事件可以冒泡，而blur()事件不会冒泡。
  • 可以使用event.target属性来获取失去焦点的元素。
Tags: