javascript addEventListener function parameters

Question

I am trying to capture the screenX and screenY value on each time mouse click on my canvas, so I use the addEventListenerbut the thing I got a little bit confused is:

canvas = document.getElementById('theCanvas');
ctx = canvas.getContext('2d');

window.addEventListener("click",function(event){
  console.log(event)
});

after I find the clientX and clientY value which indicates my mouse x/y position on the screen in the console. I am a bit confused at when I tried to replace the event parameters with any other word or variables, it still did the same output in the console just like:

window.addEventListener("click",function(b){
  console.log(b)
});

I am curious is that no matter what parametersI have passed into the function() here, will it always return the everything on the window object? I have read the article on the https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener but it didn't cover this. so may I get a help with my curiosity?

Renaming the parameter will not change its value. I'm not quite sure what you're trying to achieve. — Tyler Roper, May 24 '17 at 15:42
yes and i did same output in the console, just wondering why is this? — mystreie, May 24 '17 at 15:43
Because `function (name1) { alert(name1) }` is the same exact thing as `function (name2) { alert(name2) }` - The only thing that changes the output is what you *pass into it*, not the name of the parameter. And in the case of your event listener, the item passed in is always the `event`. — Tyler Roper, May 24 '17 at 15:44
that is just callback with event as parameter. doesn.t matter what name you give for that — Dinesh undefined, May 24 '17 at 15:44
@Santi i am intend to get ClientX and clientY value with each time my mouse click on the window, but by passing the argument into the function and console.log() it, it just works fine. just wondering the return value will always be the everything on the window object is it correct? — mystreie, May 24 '17 at 15:48
@mystreie The passed argument is not the `window` object. It will always be the `event` object. That object will have properties that are particular to the event taking place. See my answer below for details. — Scott Marcus, May 24 '17 at 15:58
Quite often the event object will contain a reference to the window, so if you are console.logging it, you'll see a bunch of window-specific properties buried within, say,"event"->"view"->"window". — James, May 24 '17 at 16:01

Scott Marcus · Accepted Answer · 2017-05-24T16:10:18.570

Browser triggered events are just that, they are triggered by the browser. As such you cannot pass your own arguments to them. When a typical browser event is fired and a handler for that event has been registered, the registered handler is automatically called by the user-agent and that handler is automatically passed a single argument, that references the event that triggered the handler. From that event, you can access whatever properties it has by accessing that argument. Argument names are only for the code within the function to access the data passed to the function. The name it is received as does not alter the data that is passed into the function.

In your case, you are setting up a click event handler for the window object, so a reference to the click event is what will be passed into your callback function. There is nothing you can do to alter that and you may call that argument anything you like. The properties for the event object will depend on the kind of event object that is generated (i.e. for mouse related events, you'll have properties like clientX and clientY, but for keyboard related events, you'll have properties like keyCode and shiftKey). Simply logging the event itself or debugging the event handling function will allow you to inspect all the properties available to you, but again, those properties will vary depending on the type of event you are handling.

window.addEventListener("click",function(aNameThatIhaveChosen){
  console.log("You have clicked at: " + aNameThatIhaveChosen.clientX + ", " + aNameThatIhaveChosen.clientY );
});

<h1>Click anywhere</h1>

Now, in some cases, you may want additional arguments passed to the event handling function as well. This can be accomplished by wrapping the handler function inside of another function. Then you can pass along the automatic event argument to the actual handler, but also pass your own data as well:

window.addEventListener("click", function(evt){
  // We're just going to pass along the event argument to our custom function
  // and add additional arguments as necessary
  handleClick(evt, "My Custom Data", new Date());
});

// This is the function that will actually handle the click event.
// It will be passed the auto-generated event argument, but also 
// it will be passed any custom arguments we want.
// Note that while the function above recieved the event as "evt"
// and passed that object reference to this function as "evt", this
// function is recieving it as "event". What we call the input parameters
// doesn't change what those parameters really are, only how we access them.
function handleClick(event, customA, customB){
    console.log("You have clicked at: " + event.clientX + ", " + event.clientY );
    console.log("The custom data was: " + customA + ", " + customB.toLocaleTimeString());
}

<h1>Click anywhere</h1>

thanks for your reply in such details, now i understand so in my case the window object reference will passed into my callback function when the click event was triggered(as the user just "click" on the browser) is this correct? — mystreie, May 24 '17 at 16:51
No, Again, you are **not** getting a reference to the `window` object at all. You are getting a reference to the `click` **event** object. `window` is the global object in a browser. Anytime you want to access it, just write `window`. — Scott Marcus, May 24 '17 at 16:54
i have another question about in the: target.addEventListner('event',somefunction()); the target has to be the html or browser element which implemented with js right? just wondering if i draw a circle within canvas and i want that circle object to be my EventTarget is there any way to do it? or just specify each ScreenX and ScreenY mouse properties to target with? — mystreie, May 24 '17 at 16:57
The `target` object is any object that can emit events. I know that the `canvas` can do this, but within a `canvas`, to be able to react to clicks and mouseovers of shapes on the `canvas`, I think you have to set up the event handler on the `canvas` object and then check the coordinates within the `canvas` to know if the user has interacted with the part of it you care about. This explains that in more detail: https://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element — Scott Marcus, May 24 '17 at 16:59

score 4 · Answer 2 · answered May 24 '17 at 16:03

Also you can always use your customs functions in this way:

 window.addEventListener("click",function(event){
    yourCustomFuction(ctx, event.screenX /* .. or other params */);
 });

function yourCustomFuction(a, b)
{
    console.log(a);
    console.log(b);
}

score 1 · Answer 3 · answered May 24 '17 at 15:44

When you define a function, you give variable names to the arguments.

Those names matter only inside the function.

The values given to those variables are determined by whatever calls the function.

You wouldn't expect different results between:

function myFunction(a_variable_name) { 
    alert(a_variable_name);
}
myFunction("A string");

and

function myFunction(a_DIFFERENT_variable_name) { 
    alert(a_DIFFERENT_variable_name);
}
myFunction("A string");

The browser will call the event handler function when the event is triggered. The first argument it passes will be an event object.

The name of the variable that the first argument is stored is will be whatever you set it to be.

javascript addEventListener function parameters

3 Answers3