.focusout()

jQuery

previous page next page

.focusout()

Categories: Events > Keyboard Events | Events > Mouse Events

.focusout( handler(eventObject) ) Returns: jQuery

Description: Bind an event handler to the "focusout" JavaScript event.

  • version added: 1.4.focusout( handler(eventObject) )

    • handler(eventObject)
      Type: Function()
      A function to execute each time the event is triggered.

  • version added: 1.4.3.focusout( [eventData ], handler(eventObject) )

    • eventData
      Type: Object
      An object containing data that will be passed to the event handler.
    • handler(eventObject)
      Type: Function()
      A function to execute each time the event is triggered.

This method is a shortcut for .on('focusout', handler).

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

This event will likely be used together with the focusin event.

Example:

Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      .inputs { float: left; margin-right: 1em; }
                                    

                                  

                                  

                                    

                                      .inputs p { margin-top: 0; }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div class="inputs">
                                      
                                    

                                  

                                  

                                    

                                        <p>
                                    

                                  

                                  

                                    

                                          <input type="text" /><br />
                                    

                                  

                                  

                                    

                                          <input type="text" />
                                    

                                  

                                  

                                    

                                        </p>
                                    

                                  

                                  

                                    

                                        <p>
                                    

                                  

                                  

                                    

                                          <input type="password" />
                                    

                                  

                                  

                                    

                                        </p>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      <div id="fo">focusout fire</div>
                                    

                                  

                                  

                                    

                                      <div id="b">blur fire</div>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      var fo = 0, b = 0;
                                    

                                  

                                  

                                    

                                      $("p").focusout(function() {
                                    

                                  

                                  

                                    

                                        fo++;
                                    

                                  

                                  

                                    

                                        $("#fo")
                                    

                                  

                                  

                                    

                                          .text("focusout fired: " + fo + "x");
                                    

                                  

                                  

                                    

                                      }).blur(function() {
                                    

                                  

                                  

                                    

                                        b++;
                                    

                                  

                                  

                                    

                                        $("#b")
                                    

                                  

                                  

                                    

                                          .text("blur fired: " + b + "x");
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page