The event object has some useful properties.
Let us consider the following HTML code for our examples:
<body>
<div style="width: 100px
; height: 100px
; background-color:green"
id = "greenDiv">
<div style="width: 40px
; height:40px
;background-color:yellow"
id = "yellowDiv"> </div></div>
</body>
Example:
We can log in the event target:
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);
function greenListener(event){
console.log(event.target);
console.log("clicked Green Square!");
}
We get a complex object. This object actually represents the div element. So, event.target gives the object on which the event happened. This is very useful because there are times when you need this object. During runtime, we may want to know, which element precisely triggered this event.
To know the problematic element, we can set the background color of the target element to "blue".
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);
function greenListener(event){
console.log(event.target);
event.target.style.backgroundColor = "blue";
console.log("clicked Green Square!");
}
Now, we can click on one of the squares and change its color to blue. So, event.target is very useful for debugging purposes.
We can also extract the position of where the click happened. For example:
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);
function greenListener(event){
//console.log(event.target);
console.log(event.clientX, event.clientY);
console.log("clicked Green Square!");
}
This will print the X and Y position of the point of click on the document. So, now, if I click on one of the squares. We can see that the coordinates change depending on where my cursor is.
This is extremely useful. As we can use these coordinates to move something on the page or some other action. To check all the properties that are available by default on each event - can be found on this page:
https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties
But, for specific event like say.. mouse click event we can just google for it. We can then arrive at a MDN page:
https://developer.mozilla.org/en-US/docs/Web/Events/click
... which will give us an overview of the properties which we can access at the time of developing.
https://developer.mozilla.org/en-US/docs/Web/Events/click#Properties
If we want to get a list of all the available events on a certain object. We can either:
- log the element to the console
- google for it.
Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Event
Practice at:
http://jsbin.com
Let us consider the following HTML code for our examples:
<body>
<div style="width: 100px
; height: 100px
; background-color:green"
id = "greenDiv">
<div style="width: 40px
; height:40px
;background-color:yellow"
id = "yellowDiv"> </div></div>
</body>
Example:
We can log in the event target:
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);
function greenListener(event){
console.log(event.target);
console.log("clicked Green Square!");
}
We get a complex object. This object actually represents the div element. So, event.target gives the object on which the event happened. This is very useful because there are times when you need this object. During runtime, we may want to know, which element precisely triggered this event.
To know the problematic element, we can set the background color of the target element to "blue".
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);
function greenListener(event){
console.log(event.target);
event.target.style.backgroundColor = "blue";
console.log("clicked Green Square!");
}
Now, we can click on one of the squares and change its color to blue. So, event.target is very useful for debugging purposes.
We can also extract the position of where the click happened. For example:
var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);
function yellowListener(event){
console.log("clicked Yellow Square!");
}
var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);
function greenListener(event){
//console.log(event.target);
console.log(event.clientX, event.clientY);
console.log("clicked Green Square!");
}
This will print the X and Y position of the point of click on the document. So, now, if I click on one of the squares. We can see that the coordinates change depending on where my cursor is.
This is extremely useful. As we can use these coordinates to move something on the page or some other action. To check all the properties that are available by default on each event - can be found on this page:
https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties
But, for specific event like say.. mouse click event we can just google for it. We can then arrive at a MDN page:
https://developer.mozilla.org/en-US/docs/Web/Events/click
... which will give us an overview of the properties which we can access at the time of developing.
https://developer.mozilla.org/en-US/docs/Web/Events/click#Properties
If we want to get a list of all the available events on a certain object. We can either:
- log the element to the console
- google for it.
Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Event
Practice at:
http://jsbin.com
No comments:
Post a Comment