Should I be using "this" or "event.target" in javascript?

Question

I have created a simple div demonstration below, that will display none once click.

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

function toggle2(e) {

    var textx = (e.target) ? e.target : e.srcElement;
    textx.style.display = "none";

    console.log(e.target);
}

my question is what is the difference if I replace

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

with

<div id="three" onclick="toggle2(this);return false;" style="background:#303; color:#FFF;">

both of them work fine for my example abovee.....

score 8 · Accepted Answer · answered Jun 12 '13 at 08:23

It may well be that they are exactly the same. This depends on the HTML. In this case, this will always be the div element. this refers to the element where the event is captured. event.target, however, points to the element where the event originated.

If the element has no children, they will always be the same. If, however, you had something like this:

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">
    <span>Line 1</span>
    Line 2
</div>

then they may be different. A click on Line 1 will cause event.target to be the span element, so only that element will be hidden.

Unless you specifically want to point to the element where the event originated, it's more intuitive to use this.

this refers to the owner of the function. Sometimes that’s another bit of code, but it also might be an object. But if you’re writing an event handler function, you’re probably better off avoiding this? Because in IE it refers to the event handling framework object I guess... :) — Roxy'Pro, Dec 25 '18 at 17:40

score 3 · Answer 2 · answered Jun 12 '13 at 08:16

You usually use e.target when "e" is the event like a click passed in parameter.

When you pass this as a parameter, this is the reference to the DOM node in which there is the javascript method. So here, "this" references the div.

And as you have a click event on your div, when you click on it, it is considered as an event, that's why this and e.target both work.

Moreover, "this" will always refer to you div, whereas "e.target" will reference an element you clicked in the div.

score 2 · Answer 3 · answered Jun 12 '13 at 08:13

2

I think isn't necessary to pass this as argument on onclick event, you can use this direct to the function.

answered Jun 12 '13 at 08:13

campsjos

1,275
15
22

score 2 · Answer 4 · edited May 23 '17 at 10:30

The event refers to the event currently being fired. Now in a browser the events are bubbled up from the element on which the event is fired to its parent until it reaches the document root. More at: What is event bubbling and capturing?

In your example, the event points to the click event and the event.target is the div and this refers to the div itself. If you add a child element to the div and click on the element then the event.target will point to the child element and this will still refer to the div.

Should I be using "this" or "event.target" in javascript?

4 Answers4