Jquery / javascript: function (e) {.... what is e? why is it needed? what is he actually doing / doing?

Question

$('#myTable').click(function(e) { var clicked = $(e.target); clicked.css('background', 'red'); }); 

Can someone explain this to me and explain why it is necessary, and what it actually does.

Answer 1

Using e is just short for event . You can pass any variable name you wish.

 // would work just the same $('#myTable').click(function(anyothername) { var clicked = $(anyothername.target); }); 

You can learn more about jQuery event handling .

Answer 2

One of the advantages of having e (the object that generated the event) is to prevent the propagation of default behavior for certain elements. For example:

 <a id="navLink" href="http://mysite/someOtherPage.htm">Click For Info</a> 

Displays a link that a user can click. If the user has JavaScript disabled (why? I don’t know), you want the user to go to someOtherPage.htm when they click on the link. But if they have JavaScript enabled, you want to display a modal dialog and not move from the page. You would deal with this by preventing the default behavior of the anchor / link and displaying the modal as such:

 $("#navLink").click(function(e) { e.preventDefault(); //this prevents the user from navigating to the someOtherPage.htm $("#hiddenDiv").dialog({ //options }); //show the dialog }); 

Thus, the presence of this parameter allows, among other things, to describe in other answers, to prevent the behavior of the selected element by default.

Hope this helps!

Answer 3

I say in theory that I am not an expert, but I achieved the desired result using its small (e), which should not be e lol

I get it. This is a way to pass the same event from one function to another.

Simply put. I wanted to make page navigation a flexible scroll function, but I wanted the page to be navigated "and" I wanted the same navigation to be available under certain conditions. I also need the same dynamic navigation from other click events that were not links. To save the current target and still use the navigation function, I had to set small (e) because jQuery will lose the $ (this) area as the same target of the lol function. Here is a brief example.

 function navigate_to_page(e){ var target = $(e.currentTarget).attr('href'); //--This is the same as $(this) but more static to bring out of it scope $('html, body').animate({ 'scrollTop':$(target).offset().top-0, 'scrollLeft': $(target).offset().left-$(window).width()*0.0}, 2000, 'easeOutBounce'); } 

Do not let the gibberish confuse you. This is just a simple page scroll animation. You should pay attention to e.currentTarget . e is our variable, and currentTarget is the jQuery equivalent of $ (this), so together they are a Globular $ (this) function. Now I call it another function with such conditions

 $('#myNavigationDiv a').on('mouseenter', function(e){ if($(myCondition) === true){ return false; }else{ navigate_to_page(e); } }); 

See how small (e) knitted it all together?

Now you can replace (e) with (whatteverouant). By calling e in both functions, it maps to e .currentTarget, and you can apply this to any detailed specific functions you need and save LITERALLY pages of code lol

Answer 4

This is a formal parameter for a function. jQuery will pass the event object when the function is called. This is used to determine the goal. As noted in the documentation , jQuery will always pass the event object, even if the browser (e.g. IE) does not.

In this case, the target indicates which item was originally clicked.