clientX not working with mousemove event in JS

[Pranab]

Trying to get the values of clientX and clientY with mousemove event but nothing popped in screen.

Heres’s the code –

HTML

  
X value = 
  
Y value = 

JS

let xpart = document.querySelector(".x span"),
    ypart = document.querySelector(".y span");

function screenView(e){
  xpart.innerHTML = e.clientX;
}

window.addEventListener("mousemove", screenView(event));

What did i do wrong? Please help me out anyone…

[Shikkediel]

I think you’ll have to write it like this if you want to pass that event parameter:

window.addEventListener("mousemove", function(event) {
  screenView(event);
});

[Pranab]

Ohh ok… Thanks buddy. Now i got it.

If i simple put this function over there, then it would render like this –
xpart.innerHTML = e.clientX and now because of e, it return undefined.

but if i first mentioned function(event) and then the callback, then e replaced with event.

and Boom!! that’s it. Thanks again…

[Pogany]

Also you can write it like this:

window.addEventListener("mousemove", screenView);

[Pranab]

Yes, you’re right. I never thought of it but for that i’ve to replace the callback e to event then it’s working…nice idea… Thanks

[Pranab]

@Shikkediel and @Pogany what is e in e.clientX? I just changed it with random variables or changed it to my name and still working, still showing me the co-ordinates. what is the parameter refering to?

[Shikkediel]

It’s referring to the event itself – which is an object, looking a bit like this (doesn’t matter what you name it):

event = {
clientX: 733, // coordinate value in px
clientY: 137,
target: html, // item from which event originated
type: "click" // kind of event
}

And a whole bunch more data… have a look here, open the console, then click the window – you can see the entire object:

codepen.io/dePbRq

If you want to access the values, you do this by referring to the key as a dot notation:

var whatever = event.type;

// whatever == "click";

Or with this notation:

var whatever = event['type'];

So the object has keys and those are coupled with the values (which is what you’re after).

[Shikkediel]

By the way, it matters a tiny bit what you name it because some words are reserved in JS.

And I’d advise to not try logging the mousemove to the console because it fires with each cycle of your computer, which can amount to more than 100 events a second…

[Author]

Posts