e.target vs. e.currentTarget

I feel the need to explain the difference between e.target and e.currentTarget. There are subtle differences. Relying on e.target is NOT the way to go, and I tend to see over usage amongst the code that I review.

Consider the following markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        a {
            background: pink;
            padding: 10px;
        }
        span {
            background: yellow;
        }
    </style>
</head>
<body>
    <a href="#"><span>This is some content inside a link</span></a>
</body>
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="/Scripts/jquery.querystring.js"></script>
<script type="text/javascript">
    var debug = 'on';
</script>
<script type="text/javascript" src="/Scripts/log.js"></script>
<script type="text/javascript">
    $(function () {
 
        $('a').on('click', function (e) {
            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
            var target = e.target,
                $target = $(target),
                currentTarget = e.currentTarget,
                $currentTarget = $(currentTarget);
 
            $target.log('I am the target');
            $currentTarget.log('I am the currentTarget');
        });
 
    });
</script>
</html>

This renders the page like this:

If I click on the pink padding of the a, e.target and e.currentTarget are predictably the a.

If I click on the actual link which is really INSIDE the span, e.target and e.currentTarget are completely different.

The SPAN that you clicked on is the target. However, we bound the original event handler to the A. So if you wanted your event handler callback function to operate in reference to the A, you’re shit out of luck that you chose e.target in your code.

You might be asking, why not use “this”? I personally tend to shy away from using “this”, because you have to pay special attention to scope and closures. If you know what I’m talking about, then go right ahead and use “this”.

For arguments sake, here is the output when we add it to the code:

    $(function () {
 
        $('a').on('click', function (e) {
            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
            var target = e.target,
                $target = $(target),
                currentTarget = e.currentTarget,
                $currentTarget = $(currentTarget),
                $this = $(this);
 
            $target.log('I am the target');
            $currentTarget.log('I am the currentTarget');
            $this.log('I am this');
        });
 
    });

KNOW THIS!

A special note, I am using the scripts log.js and jquery.cookie.js to do some special logging stuff. You may have notice that I had a line of code that said var debug = ‘on’. Well, if this wasn’t set, I also could have added debug=on to my uri querystring and also turned on console logging. If you’re interested in those little tidbits, you can check out the attached project.

Download the content here

3 thoughts on “e.target vs. e.currentTarget

Leave a Reply