CODEWITHSUNDEEP
javascriptjquery
user2953551
user2953551

Reputation: 13

difference between jQuery function() and function(event)

I am new to jQuery and trying to find out what is the difference between following two syntax.

1. $( "#target" ).keyup(**function( event )** {
     alert("Event argument");
   }

2. $( "#target" ).keyup(**function(  )** {
     alert(" No Event argument");
   }

Html :

input id="target" type="text"

Does it make any difference in adding "event" argument in .keyup() definition ??

Upvotes: 0

Views: 201

Answers (2)

m59
m59

Reputation: 43745

It doesn't make any difference unless you need the event for something. In the case of a keyup event, the event object will include the keyCode which is very useful.

Try this out:

$("#target").keyup(function(event) { 
  alert(event.keyCode); 
}

It's a lot easier to work with console.log rather than alert. You might want to change to that so that you don't have to deal with popups all the time. View the log in the dev tools (probably f12 key).

This might help you understand what is going on better:

function foo(yourFunction) {
  var eventObject = {keyCode: 10};
  yourFunction(eventObject);
}

foo(function(event) {
  console.log(event);
});

In this example, function foo is called and a function is passed into it. foo then calls the passed in function and passes a value into that function. In order for that function to use it, the function has to give it a name. Look at this:

foo(function() { //now the function doesn't accept any arguments/parameters
  console.log(event); // what is "event" ???
});

The arguments passed into a function can be accessed with the variable arguments. To keep with my previous examples:

function foo() { //argument name removed
  var eventObject = {keyCode: 10};
  yourFunction(eventObject); //this is now undefined

  console.log(arguments); 
  //this will be an array
  //the first value of the array will be the function that was passed in
}

foo(function() { //argument named remove
  console.log(event); //this is also undefined
  console.log(arguments);
  //the first value of "arguments" will be the eventObject that was passed in
});

Whether you write the function to accept arguments or not, arguments can still be passed to it and are available with the arguments variable, but if you need them, you should give them a local variable name.

One last thing. It doesn't matter what you name an argument. You're just giving it whatever local name you want.

$("#target").keyup(function(e) {
  alert(e);
}
$("#target").keyup(function(evt) {
  alert(evt);
}
$("#target").keyup(function(event) {
  alert(event);
}
$("#target").keyup(function(cookieMonster) {
  alert(cookieMonster);
}

All of those do exactly the same thing. The variable refers to the same event object, since that is what is passed in.

Upvotes: 1

Evan Trimboli
Evan Trimboli

Reputation: 30082

The parameters are passed to the function regardless. By putting them in the function signature, you're essentially creating local variables for each argument. For example, these are essentially the same thing.

$("#target").keyup(function() { 
  var event = arguments[0];
}

$("#target").keyup(function(event) {
}

If you don't intend on using the event variable, then not declaring it does no harm.

Upvotes: 1

Related Questions