Java Reference
In-Depth Information
The Event Target
The
event.target
property returns a reference to the node that fired the event. If you
change the
doSomething()
function to the following, it will show a message in the con-
sole telling us the node that was clicked on:
function doSomething(event){
console.log(event.target);
}
For example, if you click on one of the paragraphs, you should see the following in the
console:
<p id="click">
Coordinates of an Event
The
event.screenX
and
event.screenY
properties show the number of pixels from
the left and top of the screen respectively where the event took place.
The
event.clientX
and
event.clientY
properties show the number of pixels from
the left and top of the client that is being used (usually the browser window).
The
event.pageX
and
event.pageY
properties show the coordinates (in pixels)
where the event took place from the left and top of the document respectively. This property
takes account of whether the page has been scrolled.
All these event properties are similar, but subtly different. They are useful for finding out
the place where a click happened or the position of the mouse cursor. To see the coordin-
ates that are returned for these properties, change the
doSomething()
function to the
following:
function doSomething(event){
console.log("screen: (" + event.screenX + "," +
event.screenY + ")
↵
, page: (" + event.pageX + "," + event.pageY + "),
client: (" +
