Passing 'event' into the function as an argument

Question

I'm novice with both JS and jQuery, and I'm a little bit confused about what situations would require you to pass event as an argument into the function, and what situations you would not need to.

For example:

      $(document).ready(function() {

        $('#foo').click(function() {
         // Do something
});

      });

versus

      $(document).ready(function() {

        $('#foo').click(function(event) {
         // Do something
});

      });

Answer 1

You only need the event if you're going to use it in the body of the handler.

Answer 2

The event argument has a few uses. You only need to specify it as an argument to your handler if you're actually going to make use of it -- JavaScript handles variable numbers of arguments without complaint.

The most common use you'll see is to prevent the default behavior of the action that triggered the event. So:

$('a.fake').click(function(e) {
    e.preventDefault();
    alert("This is a fake link!");
});

...would stop any links with the class fake from actually going to their href when clicked. Likewise, you can cancel form submissions with it, e.g. in validation methods. This is like return false, but rather more reliable.

jQuery's event object is actually a cross-browser version of the standard event argument provided in everything but IE. It's essentially a shortcut, that lets you use only one code path instead of having to check what browser you're using in every event handler.

(If you read non-jQuery code you'll see a lot of the following, which is done to work around IE's deficiency.

function(e) {
    e = e || window.event; // For IE

It's a pain, and libraries make it so much easier to deal with.)

There's a full accounting of its properties in the jQuery docs. Essentially, include it if you see anything you need there, and don't worry otherwise. I like to include it always, just so I never have to remember to add it in later if I decide that it's needed after all.

Answer 3

Since you are using jQuery, you only put event as an argument if you need to use the event in the handler, such as if you need the key that was pressed on a keypress event.

In JS, without jQuery or Prototype etc., you need to pass the event as a parameter for standards compliant browsers like Firefox, but the event is not passed as an argument in IE. IE actually maintains a global variable window.event. So in your handler (sans library) you need to check if the argument is undefined; if so, grab the global variable.

function eventHandler(evt) {
  var theEvent = evt || window.event;
  //use the event
}

But a library like jQuery takes care of that for you.

I honestly don't recommend using a library until you have learned the language. But if this is for a job, the by all means use the library, but learn the details of JS on your own, so you can better appreciate it.