.triggerHandler()

jQuery

previous page next page

.triggerHandler()

Categories: Events > Event Handler Attachment

.triggerHandler( eventType [, extraParameters ] ) Returns: Object

Description: Execute all handlers attached to an element for an event.

  • version added: 1.2.triggerHandler( eventType [, extraParameters ] )

    • eventType
      Type: String
      A string containing a JavaScript event type, such as click or submit.
    • extraParameters
      Type: Array
      An array of additional parameters to pass along to the event handler.

The .triggerHandler() method behaves similarly to .trigger(), with the following exceptions:

  • The .triggerHandler() method does not cause the default behavior of an event to occur (such as a form submission).
  • While .trigger() will operate on all elements matched by the jQuery object, .triggerHandler() only affects the first matched element.
  • Events created with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.
  • Instead of returning the jQuery object (to allow chaining), .triggerHandler() returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns undefined

For more information on this method, see the discussion for .trigger().

Example:

If you called .triggerHandler() on a focus event - the browser's default focus action would not be triggered, only the event handlers bound to the focus event.

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
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <button id="old">.trigger("focus")</button>
                                    

                                  

                                  

                                    

                                      <button id="new">.triggerHandler("focus")</button><br/><br/>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <input type="text" value="To Be Focused"/>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $("#old").click(function(){
                                    

                                  

                                  

                                    

                                      $("input").trigger("focus");
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      $("#new").click(function(){
                                    

                                  

                                  

                                    

                                      $("input").triggerHandler("focus");
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      $("input").focus(function(){
                                    

                                  

                                  

                                    

                                      $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page