jQuery focusin() 方法

jQuery 事件 focusin() 方法用于将事件处理程序绑定到 focusin 事件，该事件在元素或其内部任何元素获得焦点时发生。

此方法支持事件冒泡，它也可以检测父元素上的焦点事件。

语法

以下是 jQuery 事件 focusin() 方法的语法：

$(selector).focusin(function)

参数

此方法接受一个可选参数作为函数，如下所述：

function − 一个可选函数，在 focusin 事件发生时执行。

返回值

此方法不返回值，而是将事件处理程序绑定到 focusin 事件。

示例 1

当“div”元素获得焦点时，更改其背景颜色：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 30%;
        padding: 10px;
        border: 1px solid red;
    }
    input{
        width: 70%;
    }
</style>
</head>
<body>
    <div>
        <p>Change the bachground color, when gains the focus.</p>
        <label for="">Name:</label>
        <input type="text">
    </div>
    <script>
       $("div").focusin(function() {
        $(this).css({"background-color":"green", "color":"white"});
    });
    </script>
</body>
</html>

输出

上面的程序显示一个包含输入字段的 div 框，当用户单击输入字段时，div 元素的背景颜色会更改为蓝色：

当用户点击输入字段时：

示例 2

使用 focusin() 方法进行事件冒泡。

在下面的示例中，jQuery 事件 focusin() 方法用于事件冒泡：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        border: 2px solid black;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
    }
</style>
<body>
    <p>Click on the input filed to perform the event bubbling.</p>
    <div id="parent">
        <input type="text" id="child">
    </div>
    <script>
        $('#parent').focusin(function(){
            alert("Focused on the parent element or one of its children!")
        });
        $("#child").focusin(function(){
            alert("Child element gained focus");
        });
    </script>
</body>
</html>

输出

执行程序后，如果您聚焦于子输入元素，由于事件冒泡，两个 focusin() 事件处理程序都将被触发。首先，子元素的处理程序将运行，然后是父元素的处理程序，这是因为 DOM 中的事件传播：

如果用户单击输入字段（子元素）：

单击“确定”按钮后，将执行父处理程序：

示例 3

无需可选 function 参数使用 focusin() 方法：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <input type="text" placeholder="Name">
    <script>
        $('input').focusin().css({"background-color":"gray", "color":"white"});
    </script>
</body>
</html>

输出

执行程序后，未获得焦点的输入字段显示为灰色背景：

jquery_ref_events.htm

打印页面