Detailed explanation of the use of jQuery.focusout() function

The focusout() function is used to bind a handler function to the focusout event of each matching element. In addition, you can pass some additional data to the event handling function.

The focusout event is the loss of focus event. The difference from the blur event is that focusout can detect when the descendant elements of the element gain focus (in other words, the focusout event supports bubbling, but blur does not).

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the focusout event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To remove an event bound via focusout(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.4 Added this function.

jQueryObject.focusout( [ data ,]  handler )

Parameters

jQuery 1.4.3 New support: focusout() supports data parameters.

This in the parameter handler points to the current DOM element. focusout() also passes a parameter to the handler: the Event object representing the current event.

If the return value of the function handler is false, it means to prevent the element's default event behavior and stop the event from bubbling in the DOM tree. For example, if the handler function of the click event of the link returns false, the default URL jump behavior of the link can be prevented.

The handler function of the submit event of the form returns false, which can prevent the form's default form submission behavior.

Return value

focusout()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following initial HTML code:

<p>
    <input id="t1" name="name" type="text" />
</p>
<p>
    <input id="t2" name="age" type="text" />
</p>
<div id="msg"></div>

现在，我们为所有p元素的focusout事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：

focusout是支持冒泡的，当我们把鼠标光标放入文本框时，该事件冒泡传递到父元素p上，因此可以在p元素上触发focusout事件。

var $ps = $("p");

//为所有p元素的focusout事件绑定处理函数
$ps.focusout( function(event){
    $(this).css("border", "1px solid blue");
} );

//为所有p元素的focusout事件绑定处理函数
$ps.focusout( function(event){
    $(this).css("border-radius", "3px");
} );

//触发所有p元素的focusout事件
//$ps.focusout( ); // 调用不带任何参数的focusout()函数，会触发每个匹配元素的focusout事件

我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：

var inputMap = { "name": "姓名", "age": "年龄" };

// 为所有p元素的focusout事件绑定处理函数
// 文本框失去焦点时，进行表单验证，并显示相应的提示信息
$("p").focusout( inputMap, function(event){
    var map = event.data;
    var $focusText = $(this).children(":text");
    var inputName = $focusText.attr("name");
    var tips = '';
    if( !$focusText.val() ){
        tips = '[' + map[inputName] + ']不能为空!';
    }
    $("#msg").html( tips );
} );

The above is the detailed content of Detailed explanation of the use of jQuery.focusout() function. For more information, please follow other related articles on the PHP Chinese website!