-3

I've read many posts about this 'e' and about arrow functions, but I don't get it.

myDiv.addEventListener('mousedown', e => {
  x = e.clientX;
  y = e.clientY;
  console.log(x);
});
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Posoroko
  • 189
  • 1
  • 2
  • 11

2 Answers2

2

That code calls the addEventListener method on the myDiv object, which I assume is an HTML element. It passes in two arguments:

  • 'mousedown', a string telling addEventListener what event to attach the event handler to, and

  • e => {/*...*/}, the event handler function to attach

Later, if the mousedown event occurs for that element, the browser will call the event handler function with an Event object as the only argument to the handler. The handler receives that argument in its e parameter and uses properties on that Event object (clientX and clientY), assigning them to the variables x and y and then outputting x to the browser console via console.log.

I should note that unless x and y are declared in code you haven't shown, that event handler falls prey to what I call The Horror of Implicit Globals by assigning to undeclared identifiers. If x and y are meant to only be used within the event handler function, they should be declared there with const or let:

myDiv.addEventListener('mousedown', e => {
  const x = e.clientX;
  const y = e.clientY;
  console.log(x);
});

(There's also no reason to assign to y unless it's being used for something.)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Also the `e => { ... }` corresponds to `function(e) { ... }` – mplungjan Nov 26 '20 at 11:38
  • 1
    Ok. Cool! I get it. thaks a lot. I know about declaring variables and the fact that Y is there for no reason. I should'nt have put it this way. Thanks again for taking some time to answer. – Posoroko Nov 26 '20 at 11:42
  • @Posoroko - You're welcome, happy coding! – T.J. Crowder Nov 26 '20 at 11:42
  • @mplungjan - *Mostly*. :-) There'd be a big difference if the handler used `this` of course, as they often do. (Posoroko - If you use an arrow function, `this` will be the same inside the function as outside it. With event handlers, you sometimes want `this` to be controlled by the code calling the function. The browser code calling an `addEventListener` callback will set `this` to the element you hooked the event on, for instance. [More here](https://stackoverflow.com/questions/28798330/arrow-functions-and-this).) – T.J. Crowder Nov 26 '20 at 11:43
  • Yes, however in both cases we can use e.target – mplungjan Nov 26 '20 at 11:45
  • 1
    @mplungjan - Yes, or `e.currentTarget` for the same thing `this` refers to when the browser controls `this`. – T.J. Crowder Nov 26 '20 at 11:50
1
  1. Callback function in event handler
/*object*/.addEventListener(/*type*/, (e) => { /*code*/ });

The e parameter refers to the event that occurred, causing the listener to fire. The callback takes the parameter that is automatically accessible. 2) What is clientX and clientY? These are the positions of the client when the user fired the event.