event.target

jQuery

previous page next page

event.target

Categories: Events > Event Object

event.target Returns: Element

Description: The DOM element that initiated the event.

  • version added: 1.0event.target

The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.

Examples:

Example: Display the tag's name on click

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      span, strong, p {
                                    

                                  

                                  

                                    

                                        padding: 8px; display: block; border: 1px solid #999;  }
                                    

                                  

                                  

                                    

                                          </style>
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div id="log">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                      
                                    

                                  

                                  

                                    

                                        <p>
                                    

                                  

                                  

                                    

                                          <strong><span>click</span></strong>
                                    

                                  

                                  

                                    

                                        </p>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("body").click(function(event) {
                                      
                                    

                                  

                                  

                                    

                                        $("#log").html("clicked: " + event.target.nodeName);
                                    

                                  

                                  

                                    

                                      });  </script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Implements a simple event delegation: The click handler is added to an unordered list, and the children of its li children are hidden. Clicking one of the li children toggles (see toggle()) their children.

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
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <ul>
                                      
                                    

                                  

                                  

                                    

                                        <li>item 1
                                    

                                  

                                  

                                    

                                          <ul>
                                    

                                  

                                  

                                    

                                            <li>sub item 1-a</li>
                                    

                                  

                                  

                                    

                                            <li>sub item 1-b</li>
                                    

                                  

                                  

                                    

                                          </ul>
                                    

                                  

                                  

                                    

                                        </li>
                                    

                                  

                                  

                                    

                                        <li>item 2
                                    

                                  

                                  

                                    

                                          <ul>
                                    

                                  

                                  

                                    

                                            <li>sub item 2-a</li>
                                    

                                  

                                  

                                    

                                            <li>sub item 2-b</li>
                                    

                                  

                                  

                                    

                                          </ul>
                                    

                                  

                                  

                                    

                                        </li>
                                    

                                  

                                  

                                    

                                      
                                        </ul>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                          function handler(event) {
                                        
                                      
                                    

                                  

                                  

                                    

                                        var $target = $(event.target);
                                    

                                  

                                  

                                    

                                        if( $target.is("li") ) {
                                    

                                  

                                  

                                    

                                          $target.children().toggle();
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                      }
                                    

                                  

                                  

                                    

                                      $("ul").click(handler).find("ul").hide();</script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page