function(event) vs function() in jquery

Question

I am new to Jquery.I am little bit confused on a jquery snippet.I have a checkbox for selecting all other checkboxes under it after clicking the main checkbox.the code is like this:

Jquery:

$(document).ready(function() {
$('#selecctall').click(function() {  //on click 
    if(this.checked) { // check select status
        $('.checkbox1').each(function() { //loop through each checkbox
            this.checked = true;  //select all checkboxes with class "checkbox1"               
        });
    }else{
        $('.checkbox1').each(function() { //loop through each checkbox
            this.checked = false; //deselect all checkboxes with class "checkbox1"                       
        });         
    }
});

});

Html:

<ul class="chk-container">
  <li><input type="checkbox" id="selecctall"/> Selecct All</li>
  <li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is   Item 1</li>
  <li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>
  <li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>
  <li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>
</ul>

My confusion is that when I used $('#selecctall').click(function() statement,it works as same as that of $('#selecctall').click(function(event).So may I know which way of calling the event is better.

Answer 1

In Javascript, functions can be passed a different number of parameters that appears in their definition.

In your case,

$('#selecctall').click(function() {

and

$('#selecctall').click(function(event) {

and

$('#selecctall').click(function(foo) {

and

$('#selecctall').click(function(foo, bar, baz, bing) {

are all equivalent, since you don't use the argument that jQuery passes to your function.

Obviously, prefer the first since it is the most concise and the most readable.

Answer 2

Both are the same, in function(){} you don't have a named refernce to the event object which is passed as the first argumetn to the event handler. when you use function(event){} you are receiving the event object with a parameter event referencing to it.

In normal circumstances you may not need access to the event object so the first method will be fine.

But in case you need to access event object's property like target or stop event propagation or prevent the default action of the event then might have to use the second varient.

Answer 3

Based on your code, passing or not passing the event parameter to the callback function does not change anything simply because you don't need it. The event object has information about the event, such as what kind of event is it, when was it triggered, on which element was it triggered, etc. In your case, you just want to select all other check boxes if the main on is selected, therefore the event object is not needed.