Question

Why does the first method work but not the second?

I’m stumped why I can pass an event to a function using the first method, but not the second. To me these should work identically. Loosely based off of Obtain Mouse Coordinates.

This does work:

document.onclick = function (e) {
  var x = e.pageX;
  var y = e.pageY;
  console.log(x);
};

This does not work. It returns “Uncaught ReferenceError: z is not defined”.

document.onclick = mousePosition(z);

function mousePosition (e) {
  var x = e.pageX;
  var y = e.pageY;
  console.log(x);
};

Answer 1

Because in the second way you are calling the function and not defining the event action as it. Try this instead:

function mousePosition (e) {
    var x = e.pageX;
    var y = e.pageY;
    console.log(x);
};
document.onclick = function(z){
    mousePosition(z);
}

Or also:

function mousePosition (e) {
    var x = e.pageX;
    var y = e.pageY;
    console.log(x);
};
document.onclick = mousePosition;