YouTip LogoYouTip

Event Focusout

## jQuery focusout() Method The `focusout` event occurs when an element (or any element inside it) loses focus. The `focusout()` method attaches a handler function to be executed when the `focusout` event is triggered on the selected element or its descendants. ### Difference between focusout() and blur() Unlike the [blur()](event-blur.html) method, the `focusout()` method supports event bubbling. This means it will trigger if any child element inside the selected parent element loses focus. * **`blur()`**: Triggers only when the selected element itself loses focus (does not bubble). * **`focusout()`**: Triggers when the selected element *or any of its child elements* lose focus (bubbles). **Tip:** This method is typically used together with the [focusin()](event-focusin.html) method. --- ## Syntax ```javascript $(selector).focusout(function) ``` | Parameter | Description | | :--- | :--- | | `function` | *Optional.* Specifies the function to run when the `focusout` event occurs. | --- ## Code Examples ### Example 1: Basic Usage with Event Bubbling In this example, we set the background color of a `
` element back to white when any input field inside it loses focus. ```javascript $("div").focusout(function() { $(this).css("background-color", "#FFFFFF"); }); ``` ### Example 2: Comparing focusout() and blur() This example demonstrates how `focusout()` bubbles up to parent elements, whereas `blur()` does not. ```html

Using focusout() (Bubbles):

Status: Active

Using blur() (Does not bubble):

Status: Active
``` --- ## Considerations & Best Practices 1. **Event Delegation:** Because `focusout` bubbles, you can use it for event delegation. This is highly useful when you are dynamically adding input fields to a form and want to validate them as they lose focus. 2. **Browser Compatibility:** The native JavaScript `focusout` event is supported in all modern browsers. jQuery's `.focusout()` method normalizes any cross-browser inconsistencies, making it safe to use across different platforms. 3. **Performance:** If you only need to detect when a specific, single input loses focus, use `.blur()` to avoid the overhead of event bubbling. Use `.focusout()` when you need to monitor focus states at a container level.
← Event HoverEvent Focusin β†’