Is the argument passed to .click() method parameter always the Event object?

Question

I just want to understand how the parameter in the .click() method works. From my understanding, the .click() method takes a function as a parameter.

As per the jQuery API, .click() can take two parameters:

([eventData], event handler)

And then the event handler function can take this parameter:

(Event eventObject) 

Does that mean that the function parameter of the .click() method would always expect the "Event object" to be passed to it?

Like, for the below example, I created a random object and then passed it as an argument. The function parameter of .click() method seems to ignore that it is a random object and continued to use it as the "Event object".

var anObject = {
  "property1" : "someproperty"
};

$(document).click(function(anObject) {
  var x = anObject.pageX;
  var y = anObject.pageY;

  logClicks(x, y);
});

var logClicks = function(x, y) {
  console.log("x: " + x + " y: " + y)
}

The question is, what is going on under the hood? Why is it the case?

EDIT:

I'm not so confused about the [eventData] parameter and how the event handler uses it. Just more on how its function parameter sort of converts any parameter you pass to it to be a variable that holds the Event object .

Answer 1

Does that mean that the function parameter of the .click() method would always expect the "Event object" to be passed to it?

Yes, the parameter passed to the event handler function will always be a jQuery event object.

Your confusion seems to be around the ([eventData], event handler) signature of the click() method. The first parameter in this case is used to add a value to the data parameter of the event object provided to the event handler. In the case of the code in your question, you would use this:

 var anObject = { "property1" : "someproperty" }; $(document).click(anObject, function(e) { var x = e.pageX; var y = e.pageY; var data = e.data.property1; logClicks(data, x, y); }); var logClicks = function(data, x, y) { console.log(data, x, y) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

You're passing an anonymous function as a parameter to the .click() function.

Hence that function has a different scope and anObject is not what you've globally declared but what is actually passed by the jQuery API which is an Event.

var anObject = {
  "property1" : "someproperty"
};

$(document).click(function aNewFunctionWithHisOwnScope(anObject) {
  // here anObject references an Event
  x = anObject.pageX;
  y = anObject.pageY;

  logClicks(x, y);
});

// here anObject references again your defined anObject

So finally, yes: It will always be an Event

EDIT since I might haven't been clear:

your anObject var is available from inside the anonymous function since it's like a global variable. But since they've the same name , inside the function, the last reference is used, hence the value used (inside the function) is the one passed as parameter, while outside the function the 'global' anObject keeps its value.

Answer 3

The first parameter in the click([eventData], event handler) needs to be eventData which will be further passed to the event handler and later you can access that data using event.data :

$(document).click(anObject, function(e) {
  x = e.pageX;
  y = e.pageY;

  // access the object passed as e.data
  console.log(e.data.property1);

  logClicks(x, y);
});