Difference between "e" and "event"

Forum Moderators: open

Message Too Old, No Replies

Difference between "e" and "event"

csdude55

7:53 pm on Mar 19, 2019 (gmt 0)

I thought that the two were interchangeable, but I'm finding that sometimes I have to use "event" instead of "e". And I can't find any pattern on why!

For example, I have this function that I use regularly:

$.fn.toggleClick = function(e) {
 this.toggle();

 if (e.stopPropagation) e.stopPropagation();
 e.cancelBubble = true;

 return this;
}

A common usage would be:

<div onClick="
 $('#example').toggleClick(e)
            .ajax('https://www.example.com/whatever.php')">

But every once in awhile I'll find where I get an error on the onClick that "e is not defined", and switching it to "event" fixes it.

So what's the connection? When do I use "e" and when do I use "event"?

If it matters, I'm mostly testing with Chrome.

NickMNS

8:21 pm on Mar 19, 2019 (gmt 0)

In the first instance "e" is a variable that you are "defining" when you are defining the anonymous function

 function(e) {...}

It's scope is only valid within that function, so if you do e.stopPropagation() it should work as expected (assuming that the object you are passing to e is a valid object). But if you use event.stopPropagation() within the anonymous function then you the "event is not defined" error.

Now when you are calling the function by using its variable "toggleClick" then you are passing the value of "e" to the function. Basically assign the value of "e" from outside the function to the variable "e" within the function. In other words, the "e" in "toggleClick(e)" is scoped outside of the function and is not the same "e" variable as the one defined inside the function. So if there is no "e" defined outside of the function's scope you will get the "e is not defined" error. You can pass "event" to the function "toggleClick(event)" if "event" exists and it will assign "event" to the "e" in the function. This may make it a little easier to understand, since it differentiates explicitly between outside "e" and inside "e".

I hope this helps.

csdude55

10:44 pm on Mar 19, 2019 (gmt 0)

So... if I change the "e" in the function to "event", and then use toggleClick(e), it should be OK everywhere?

NickMNS

12:59 am on Mar 20, 2019 (gmt 0)

It doesn't matter what the variable is called within the function you could redefine the function like this:


$.fn.toggleClick = function(x) {
 this.toggle();
 if (x.stopPropagation) x.stopPropagation();
 x.cancelBubble = true;
 return this;
}

and still call the function like this:

use toggleClick(e)

use toggleClick(event)

and it would not change anything. Again, the "e" inside the function is not the same thing as the "e" outside the function.

The problem you are having I think is two fold, one you are assuming that the outside "e" is the same as the inside "e" because they are named the same (as explained in previous post and above). Two, I think you are assuming that with $('#example').toggleClick(e) that "e" will be an event object that is then assigned to the function, similarly to what occurs with a "click" event handler. But toggle() does not have such a feature. Thus the "e" that you are putting into:

use toggleClick(e)

is coming from somewhere else (when it works) and nowhere (when it doesn't work).

To fix this you should probably assign an event listener to the element.


$( "#example" ).click(function(e) {
 e.preventDefault();
 this.toggle();
 return this;
}

I'm not sure what the stopPropagation and cancelBubble stuff is all about, but I hope you get the idea.