CODEWITHSUNDEEP
javascript
Dimt
Dimt

Reputation: 2328

JavaScript event object in the browser console

I apologize in advance for my ignorance. I'm teaching myself JavaScript and currently experimenting with events, though I still getting confused with JS objects, I am not to sure what the console prints on the following event.

element.onclick = function(objEvent) {
 Console.log(objEvent);
}

The console shows click clientX=76, clientY=20. What exactly is that information ? Are those properties of the event object ?

Upvotes: 0

Views: 541

Answers (5)

Natan Streppel
Natan Streppel

Reputation: 5866

Whenever an event related to the DOM is fired, all of the relevant information about the action made is then gathered and stored on an object called event, which is, in your case, called objEvent.

An event caused by a keyboard action generates information about the keys that were pressed. An event caused by the mouse, on the other hand, generates information about the mouse's position, which is your case here (the X and Y position of the mouse cursor).

Upvotes: 3

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

That's right.

From this event object there are various properties and methods. The properties you are seeing there are the mouse positions.

A common use of this event object might be to get the target / srcElement of the event

event.target | event.srcElement

eg - get the id of the target/srcElement

event.target.id

Very good object to study

Upvotes: 2

André Dion
André Dion

Reputation: 21708

Are those properties of the event object ?

Yes, they are. In your case (for a click event) it's actually an object that's a superset of Event: MouseEvent.

Upvotes: 5

streetlogics
streetlogics

Reputation: 4730

Click is the event, clientX and clientY are the pixel coordinate location where the click happened. Checkout this for more info - http://www.javascripter.net/faq/mouseclickeventcoordinates.htm

Upvotes: 0

Josh Engelsma
Josh Engelsma

Reputation: 2646

Those are just the pixel coordinates on the screen of the place where your mouse clicked down.

clientX is the x coordinate

clientY is the y coordinate

Upvotes: 1

Related Questions