jquery/[removed] function(e){… what is e? why is it needed? what does it actually do/accomplish?

Question

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

Can someone explain this to me, an

Answer 1

I'm speaking in theory as to I'm no expert but I achieved the desired result by using he the little (e) which doesn't have to be an e lol

I figured it out. It's a way of passing the same event from one function to another.

In simpler terms. I wanted to make the page navigation an elastic scroll function, however, I wanted the page to navigate by hover "and" I wanted the same navigation to be clickable upon certain conditions. I also wanted the same dynamic navigation from other click events that were not links. To keep the current target and still use the navigation function I had to set the little (e) because jQuery will lose the scope of $(this) as the same target of the function lol. Here's a quick 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's scope
    $('html, body').animate({
    'scrollTop':$(target).offset().top-0,
    'scrollLeft': $(target).offset().left-$(window).width()*0.0}, 2000, 'easeOutBounce');
}

Don't let the gibberish confuse you. It's just a simple page scroll animation. The thing to pay attention to is the e.currentTarget. e is our variable and currentTarget is a jQuery equivalent to $(this) so those together is a Globular $(this) function. Now I call it by another function with condistions like so

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

See how the little (e) linked everything together?

Now you can substitute (e) to (whateveryouwant). By calling e in both functions it matched e.currentTarget and you can apply this to whatever detailed specific functions you need and save yourself LITERALLY pages of code lol

Answer 2

It's the formal parameter for the function. jQuery will pass in an event object when the function is called. This is used to determine the target. As noted in the documentation, jQuery will always pass an event object even when the browser (e.g. IE) doesn't.

In this case, the target tells you which element was originally clicked.

Answer 3

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

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

You can check out more on jQuery's handling of events.

Answer 4

One benefit to having e (the object that raised the event) allows you to prevent the propagation of default behaviors for certain elements. For example:

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

renders a link that the user can click. If a user has JavaScript disabled (why? I dunno), you want the user to navigate to someOtherPage.htm when they click the link. But if they have JavaScript enabled, then you want to display a modal dialog and not navigate away from the page. You would handle 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
});

So having that parameter available allows you to, among other things described in other answers, prevent the default behavior of the selected element.

Hope this helps!