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.

there is no difference between them... when you use event as a param name, you are using a named reference to the event argument passed to the event call, if you don't you are not creating a reference that is all — Arun P Johny
– Arun P Johny, Commented Mar 19, 2014 at 5:27
which is better... based on your need... if you want to stop the event propagation or prevent the default action then you may want to access the event object that time you will have to use function(event) else in normal circumstances it is not required — Arun P Johny
– Arun P Johny, Commented Mar 19, 2014 at 5:28
Inside javascript callback, arguments name are optional, so you decide if you want to named it or not. Since event is the first argument, you could check in arguments[0] . — progysm
– progysm, Commented Mar 19, 2014 at 5:31

Paul Draper · Accepted Answer · 2014-03-19 05:29:59Z

6

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.

answered Mar 19, 2014 at 5:29

Paul Draper

84.2k53 gold badges216 silver badges303 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-03-19 05:32:03Z

4

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.

answered Mar 19, 2014 at 5:32

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Data Crusader · Accepted Answer · 2014-03-19 05:35:52Z

1

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.

answered Mar 19, 2014 at 5:35

Data Crusader

4341 gold badge4 silver badges14 bronze badges

Comments

Zaheer Ahmed · Accepted Answer · 2014-03-19 05:36:17Z

0

As you already now know that both are same.

So may I know which way of calling the event is better.

It depends on your requirement, event parameter gives you extra information. Element triggered the event, stopPropagation(), PreventDefault() etc.

cross browser available properties:

target
relatedTarget
pageX
pageY
which
metaKey

Here is detailed information of Event object

answered Mar 19, 2014 at 5:36

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

function(event) vs function() in jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related