浏览器控制台中的JavaScript事件对象

Question

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 ?

Answer 1

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 .

Answer 2

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).

Answer 3

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

Answer 4

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

Answer 5

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