3

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?

8
  • So you're just renaming the function argument name? May 24, 2017 at 15:42
  • Renaming the parameter will not change its value. I'm not quite sure what you're trying to achieve. May 24, 2017 at 15:42
  • yes and i did same output in the console, just wondering why is this?
    – mystreie
    May 24, 2017 at 15:43
  • 2
    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. May 24, 2017 at 15:44
  • that is just callback with event as parameter. doesn.t matter what name you give for that May 24, 2017 at 15:44

3 Answers 3

5

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>

4
  • 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, 2017 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. May 24, 2017 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, 2017 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: stackoverflow.com/questions/9880279/… May 24, 2017 at 16:59
4

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);
}
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.