CODEWITHSUNDEEP
jquery
user1405506
user1405506

Reputation: 13

Why do I have to pass the letter 'e' into this jQuery function?

I know that E is short for 'event,' but it's still not clear to me why I need to use it? I tried passing other letters through the function and it didn't seem to work. Are there other situations where I need to pass a specific letter into a function? 

$("#myThing").click(function (e) {
   var hit = $(e.target);
   hit.css('color','blue');
});

This does the same thing:

$("#myThing").click(function () {
   $(this).css('color','blue');
});

When should I use $(this) versus 'e'?

Thank you!

Upvotes: 1

Views: 237

Answers (5)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

there's a small difference between the two snippets: in the first one, the element hit could not be the #myThing element itself.

Let say that #myThing is a <p> and you have clicked on a link inside it: then when the event will reach #myThing, the element referred by e.target is the link and not the paragraph

On the contrary, in the second example the element subject to a color change will always be #myThing

So, if you pass the event along with the handler it's because you have a convenience on using that event. When you pass it, you can name it e or evt or also foobar: since you're using jQuery the variable name you choose is not relevant (but for the sake of simplicity e is short and widely used).

The most common reasons to pass the event usually are

  1. prevent the default behavior of the event;
  2. stop the propagation of the event;
  3. — it's your scenario — deal with the original element in which the event was triggered (often when you're dealing with event delegation or with live update of your document);
  4. check some of the event properties (e.g. e.keycode on keyup/down event);

Upvotes: 1

raina77ow
raina77ow

Reputation: 106385

See, in this case event.target and this are referring to the same element. But when you use jQuery event delegation, they may not match:

$('body').on('click', 'tr', function(event) { ... });

Here event.target will refer to the element at which the event was triggered (it may be 'td' element or its children, for example), but this will refer to the tr element. Sometimes it's quite handy to have both of them. )

Besides, yes, event object has some other uses: with it you can stop propagation of the event, etc.

Upvotes: 1

phenomnomnominal
phenomnomnominal

Reputation: 5515

Events can carry data with them (eg a Dropped file). If you need to refer to the data that belongs to the event, use "e". If you only need to refer to the element that the event was triggered from - which is what 'this' refers to in an event callback - use 'this'.

Upvotes: 1

Matt
Matt

Reputation: 75317

The name e is meaningless; you can call it whatever you want (obviously so long as you update the references to e as well).

The code you posted will usually do the same thing; but see the following code:

​<div><span>Hi</span></div>​​​​​​​​​​​​​​​​​​

JS:

​$('div').on('click', function (e) {
    alert(this === e.target);
});​​​​​

(Run in here: http://jsfiddle.net/Dxbwm/)

You'll see it's false; thats because this is the element the event is handled on, but e.target is the element the event originated from (which in the example above, is the span). If you didn't know events worked like this before, it's called event bubbling and you can read more about it heremy blog.

Upvotes: 2

Hubro
Hubro

Reputation: 59333

You don't need to pass a specific letter through the function.

$("#myThing").click(function (e) {
   var hit = $(e.target);
   hit.css('color','blue');
});

is identical to

$("#myThing").click(function (foo) {
   var hit = $(foo.target);
   hit.css('color','blue');
});

etc.

The difference between using $(e.target) and $(this) can be quite more significant though, since this will always be the element on which the event is tied, while e.target will be the specific element that was clicked, even though it's located inside the this element

Hope that made sense

Upvotes: 4

Related Questions