CODEWITHSUNDEEP
javascriptaddeventlistener
mystreie
mystreie

Reputation: 153

javascript addEventListener function parameters

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?

Upvotes: 3

Views: 14918

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65883

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>

Upvotes: 5

Erick Lanford Xenes
Erick Lanford Xenes

Reputation: 1572

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

Upvotes: 4

Quentin
Quentin

Reputation: 944545

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.

Upvotes: 1

Related Questions