$(this) vs e.target.nodeName

Question

Violet_82 89 Posting Whiz in Training

12 Years Ago

Hi there, I wonder if anybody can help me with this. I a a bit confused as to what $(this) and what e.target.nodeName represent in jquery. I had a look at this http://api.jquery.com/event.target/ but I am still not entirely sure, I hope somebody can clarify this. I run a little test of course, trying to:
1)clarify what $(this) and e.target.nodeName (and when this distinction is useful)
2)whether the 2 are the same - and from what I read in the API they are not necessarily the same, but in my test it looks like they are.
here's the code:
HTML:

<!DOCTYPE HTML>
<html lang="en" dir="ltr">
    <head>
        <title>tst</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <div class = "me">
        <table border="1">
            <tbody>
                    <tr>
                        <td>
        <span>hey het <a href="#">this is a link <img src="ajax-loader.gif" alt=""></a></span>
        </td>
        <td>ghtd</td>
        </tr>
        </tbody>
        </table>

        <!-- NAVIGATION -->
    <div id="navBox">
        <ul>
            <li class="mainList"><a href="#">Item 1</a>
                <ul class="subList">
                    <li><a href="#">sub item1.1</a></li>
                    <li><a href="#">sub item1.2</a></li>
                    <li><a href="#">sub item1.3</a></li>
                </ul>
            </li>
            <li class="mainList"><a href="#">Item 2</a>
                <ul class="subList">
                    <li><a href="#">sub item2.1</a></li>
                    <li><a href="#">sub item2.2</a></li>
                    <li><a href="#">sub item2.3</a></li>
                </ul>
            </li>
            <li class="mainList"><a href="#">Item 3</a>
                <ul class="subList">
                    <li><a href="#">sub item1.1</a></li>
                    <li><a href="#">sub item1.2</a></li>
                    <li><a href="#">sub item1.3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- END OF NAVIGATION -->   
    </div>




    </body>
</html>

CSS (never know it might be useful)

.me{width:900px; 
height:800px;
/*background:url(ajax-loader.gif) 100px 40px no-repeat;*/
border:1px solid red;}
table a img{
    vertical-align:-3px;

}

#navBox{
    border:1px solid yellow;
    width:400px;
}
/*
#navBox ul > li > ul{
    display:none;
}
*/

.subList {display:none}
.visible{
    display:block;
}

and js

$(function(){
    $("li.mainList > a").click(function(e){

    /*testin e.target.nodeName*/

        var MyTarget = e.target.nodeName;
        console.log("'This' is " + $(this).text() + " and 'e.target.nodeName' is " + e.target.nodeName);
        //if($(this) == MyTarget){
            console.log("my target is " + MyTarget );
        //}
        //else console.log("this is not myTarget");

    /*testin e.target.nodeName*/
        $("ul.subList").removeClass("visible");
        $(this).parent().find("ul").addClass("visible");
    });

});

When I print on the console $(this).text() returns the text of the link I clicked on and e.target.nodeName the element I clicked on "A" (incidentally why does it return it in upper case?!)

javascript

5 Contributors
8 Replies
791 Views
6 Days Discussion Span
Latest Post 12 Years Ago Latest Post by Violet_82

kevinp2012 0 Newbie Poster

12 Years Ago

what you need actually with this code elloborate please!!

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

In your test they are the same, because you handle the click on the A tag.

If you would have a general click handler on a higher level (say the body), then the target would be the A (initiated the event), but this would be the body (as it owns the click handler).

this just points to the current object (in this case handling the click).

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2012-11-15T14:02:44+00:00

thanks for the explanation pritaeas, tha's clear now. So I do understant (perhaps because I have used it many times) the importance of $(this), but where would I use instead e.target.nodeName? I mean the tendency seems to me to be to attach an event handler to the element I want to use later in the script, and if not the case I can find the element I need by using methods like find(), children(), parents() etc

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 2 · 2012-11-15T14:06:14+00:00

It's like the link you gave says, it's foremost use is in event bubbling. If you don't use that, I really see no need to use e.target either.

Troy III 272 Posting Pro · Answer 3 · 2012-11-16T01:52:38+00:00

It returns "A", because HTML tag-names are defined in uppercase. In fact, HTML doesn't support or distinguish between lowercase and uppercase; Meaning, HTML is case insensitive and everything is interpreted and/or retrieved in uppercase.

Violet_82 89 Posting Whiz in Training · Answer 4 · 2012-11-16T20:41:55+00:00

thanks guys.
Troy III, I have however noticed something. Say I retrieve the node name var MyTarget = e.target.nodeName; its value is as we discussed "A". Then, in the code above $(this) is also "a":
$("li.mainList > a").click(function(e){
But in this instance even if $(this) and e.target.nodeName; are both "a", they are still different so much so that this line - which in the code above is commented out //if($(this) == MyTarget){returns false all the time. So are "a" and "A" then different?

scrager 22 Newbie Poster · Answer 5 · 2012-11-21T14:30:33+00:00

The if statement is doing type conversions.

this is the element
$(this) is the jquery object containing the anchor element.
e.target is the element
$(e.target) is a jquery object containing the anchor element, but $(this) != $(e.target)

this == e.target will evaluate to true.

this will always equal e.target on a click handler that has no children.
this is the element that the event is bound to (the element that had the click handler applied, or the element in the filter of a delegate handler). e.target is the element that triggered the original event that is bubbling up. e.target will either be this or a descendent of this.

See this JSFiddle: http://jsfiddle.net/e9TzE/2/

Violet_82 89 Posting Whiz in Training · Answer 6 · 2012-11-21T19:18:06+00:00

scrager, thanks for that, it is really really useful, and a really good reference too.

this is the element
$(this) is the jquery object containing the anchor element.
e.target is the element
$(e.target) is a jquery object containing the anchor element, but $(this) != $(e.target)

this == e.target will evaluate to true.

I understand the explanation, but my understanding of query is still a bite flaky, I still need to learn quite a lot, and I was wondering why the elements (this and e.target) if compared are the same and the objects instead $(this) and $(target) are not. I appreciate the type conversion when the if statement is used (although what type conversion?) but are objects different from the elements in that the properties of the objects are different or what?
thanks